css实现心跳效果

时间 2020-12-25
使用css3 animation实现心跳动的效果

直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style type="text/css"> .container { position: relative; margin: 100px; } .heart { position:relative; width: 100px; height: 100px; background: red; animation: hit .5s infinite alternate; transform: rotate(45deg); } .heart:before { position: absolute; left: -50px; content: ''; width: 100px; height: 100px; background: red; border-radius: 50%; animation: hitLeft .5s infinite alternate; } .heart:after { position: absolute; top: -50px; content: ''; width: 100px; height: 100px; background: red; border-radius: 50%; animation: hitTop .5s infinite alternate; } @keyframes hit { from { width: 100px; height: 100px; } to { width:150px; height: 150px; } } @keyframes hitTop { from { width: 100px; height: 100px; top: -50px; } to { width: 150px; height: 150px; top: -75px; } } @keyframes hitLeft { from { width: 100px; height: 100px; left: -50px; } to { width: 150px; height: 150px; left: -75px; } } </style>
</head>
<body>
    <div class="container">
        <div class="heart"></div>
    </div>
</body>
</html>