最近抖音很火的让你会计算机的朋友给你做个爱心突然火了，我也不出意外的收到了朋友的邀请，自己做肯定太麻烦了于是乎百度第一步，惊呆了！网上全都是一个爱心，变着法的火焰爱心，换汤不换药，那我们肯定是要整点不一样的咯
首先要表达出我们的中心，是个爱心，其次是简单，再加点动画过渡大功告成！朋友后面跟我得瑟说别人的爱心都一样，还以为我们只能做一种爱心哈哈哈，虽然没有那个炫酷，但这是咱手工打造的“不撞衫”嘛
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
color: #FFF;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background: linear-gradient(to top, #09203f 0%, #537895 100%);
}
.box {
position: absolute;
top: 200px;
right: 0;
left: 0;
margin: auto;
width: 300px;
height: 300px;
}
h1 {
text-align: center;
}
.heart {
position: relative;
font-size: 0;
width: 138px;
margin: 50px auto;
}
.heart>div {
position: absolute;
top: -5px;
width: 10px;
height: 10px;
border-radius: 5px;
}
.h-line-4 {
animation: h-line-move-4 3.8s infinite;
}
.h-line-3,
.h-line-5 {
animation: h-line-move-3 3.8s infinite;
}
.h-line-2,
.h-line-6 {
animation: h-line-move-2 3.8s infinite;
}
.h-line-1,
.h-line-7 {
animation: h-line-move-1 3.8s infinite;
}
.h-line-0,
.h-line-8 {
animation: h-line-move-0 3.8s infinite;
}
.h-line-0 {
left: 0px;
animation-delay: 0s;
background-color: #3cba92;
filter: hue-rotate(20deg);
}
.h-line-1 {
left: 17px;
animation-delay: 0.15s;
background-color: #3cba92;
filter: hue-rotate(40deg);
}
.h-line-2 {
left: 34px;
animation-delay: 0.3s;
background-color: #3cba92;
filter: hue-rotate(60deg);
}
.h-line-3 {
left: 51px;
animation-delay: 0.45s;
background-color: #3cba92;
filter: hue-rotate(80deg);
}
.h-line-4 {
left: 68px;
animation-delay: 0.6s;
background-color: #3cba92;
filter: hue-rotate(100deg);
}
.h-line-5 {
left: 85px;
animation-delay: 0.75s;
background-color: #3cba92;
filter: hue-rotate(120deg);
}
.h-line-6 {
left: 102px;
animation-delay: 0.9s;
background-color: #3cba92;
filter: hue-rotate(140deg);
}
.h-line-7 {
left: 119px;
animation-delay: 1.05s;
background-color: #3cba92;
filter: hue-rotate(160deg);
}
.h-line-8 {
left: 136px;
animation-delay: 1.2s;
background-color: #3cba92;
filter: hue-rotate(180deg);
}
@keyframes h-line-move-4 {
0%,
10%,
90%,
100% {
height: 10px;
top: -5px;
}
45%,
55% {
height: 94px;
top: -23px;
}
}
@keyframes h-line-move-3 {
0%,
10%,
90%,
100% {
height: 10px;
top: -5px;
}
45%,
55% {
height: 90px;
top: -31px;
}
}
@keyframes h-line-move-2 {
0%,
10%,
90%,
100% {
height: 10px;
top: -5px;
}
45%,
55% {
height: 80px;
top: -37px;
}
}
@keyframes h-line-move-1 {
0%,
10%,
90%,
100% {
height: 10px;
top: -5px;
}
45%,
55% {
height: 60px;
top: -31px;
}
}
@keyframes h-line-move-0 {
0%,
10%,
90%,
100% {
height: 10px;
top: -5px;
}
45%,
55% {
height: 30px;
top: -15px;
}
}
</style>
</head>
<body>
<div class="box">
<h1>为爱冲锋的勇士！<br />值得所有人尊重！</h1>
<div class="heart">
<div class="h-line-0"></div>
<div class="h-line-1"></div>
<div class="h-line-2"></div>
<div class="h-line-3"></div>
<div class="h-line-4"></div>
<div class="h-line-5"></div>
<div class="h-line-6"></div>
<div class="h-line-7"></div>
<div class="h-line-8"></div>
</div>
</div>
</body>
</html>
看成品
标签：动画,top,move,height,爱心,animation,background,line,H5C3 From： https://www.cnblogs.com/dengsir39/p/16886352.html