需求
用h5+css实现跳动的心的动画
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跳动的心</title>
<style>
#box{
margin:0 auto;
width: 200px;
height: 200px;
animation: heart 500ms infinite alternate;
}
#left{
width: 50px;
height: 50px;
background: red;
transform: rotate(45deg) translate(171px,151px);
border-radius: 50% 0 0 50%;
}
#middle{
width: 50px;
height: 50px;
background: red;
transform: rotate(45deg) translate(165px,115px);
}
#right{
width: 50px;
height: 50px;
background: red;
transform: rotate(45deg) translate(130px,49px);
border-radius: 50% 50% 0 0;
}
@keyframes heart{
0%{transform: scale(1);}
100%{transform: scale(1.4);}
}
</style>
</head>
<body>
<div id="box">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
</body>
</html>