跳動愛心主要用了些css3的動畫效果@keyframe，實現後的效果如下圖（截圖效果比較差）。代碼再往下滑。
1.html代碼
<html>
<head>
<title>跳動愛心</title>
<meta charset="UTF-8">
</head>
<body>
<div id="background">
<div class="love love-left"></div>
<div class="love love-right"></div>
<div class="love love-bottom"></div>
</div>
</body>
</html>
2.css代碼
<style type="text/css">
*{
margin:0;
padding:0;
}
#background{
position:relative;
width:520px;
height:500px;
background:pink;
margin:30px auto;
}
.love{
width:300px;
height:300px;
background:#d5083b;
box-shadow:0px 0px 40px -4px #d5083b;
}
.love-left{
position:absolute;
top:0px;
left:0px;
border-radius:150px;
/*漸變色 漸變開始位置、漸變開始顏色、漸變結束顏色*/
background:linear-gradient(to left right,#ee0a44 0%,#d5083b 40%);
/*box-shadow:-15px -13px 40px -4px #d5083b;*/
/*box-shadow:0px 0px 40px -4px #d5083b;*/
/*background:red;*/
transform:scale(1);
animation:heart-beat 0.6s ease infinite;
z-index:3;
}
.love-right{
position:absolute;
top:0px;
right:0px;
border-radius:150px;
background:linear-gradient(to right left,#ee0a44 0%,#d5083b 50%);
/*background:red;*/
transform:scale(1);
animation:heart-beat 0.6s ease infinite;
z-index:2;
}
.love-bottom{
position:absolute;
top:109px;
left:110px;
transform:rotate(45deg) scale(1);
background:linear-gradient(to left top,#ee0a44 0%,#d5083b 40%);
/*background:red;*/
animation:heart-beat 0.6s ease infinite;
z-index:1;
}
@keyframes heart-beat{
0%{
transform:rotate(45deg) scale(1);
box-shadow:0px 0px 40px -4px #d5083b;
}
50%{
transform:rotate(45deg) scale(1.1);
box-shadow:5px 5px 40px 10px #d5083b;
}
100%{
transform:rotate(45deg) scale(1);
box-shadow:0px 0px 40px -4px #d5083b;
}
}
</style>
跳動愛心主要用了些css3的動畫效果@keyframe，實現後的效果如下圖（截圖效果比較差）。
更多 css 實現的動畫可以去博主的 github 看看哦：https://github.com/cao-lianhui/CSS100day