使用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>