这个html呢,是我在之前上班的时候,暗恋一个女孩子,想跟她表示心意。于是就做了一个这个小东西。虽然最后没有追到。
它的实现原理很简单:将列表横向摆放,通过控制 li 的长度来实现这个效果。
CSS代码
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
body{
height: 100vh;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
ul{
height: 200px;
display: flex;
}
li{
width: 20px;
height: 20px;
border-radius: 10px;
background: red;
margin-right: 10px;
}
li:nth-child(1){
background: red;
animation: love1 4s 0s infinite;
}
li:nth-child(2){
background: darkturquoise;
animation: love2 4s 0.2s infinite;
}
li:nth-child(3){
background: darksalmon;
animation: love3 4s 0.4s infinite;
}
li:nth-child(4){
background: deeppink;
animation: love4 4s 0.6s infinite;
}
li:nth-child(5){
background: yellow;
animation: love5 4s 0.8s infinite;
}
li:nth-child(6){
background: deeppink;
animation: love6 4s 1s infinite;
}
li:nth-child(7){
background: darksalmon;
animation: love7 4s 1.2s infinite;
}
li:nth-child(8){
background: darkturquoise;
animation: love8 4s 1.4s infinite;
}
li:nth-child(9){
background: red;
animation: love9 4s 1.6s infinite;
}
@keyframes love1{
30%,50%{
height: 60px;
transform: translateY(-30px);
}
70%,100%{
height: 0px;
transform: translateY(0px);
}
}
@keyframes love2{
30%,50%{
height: 125px;
transform: translateY(-60px);
}
70%,100%{
height: 0px;
transform: translateY(0px);
}
}
@keyframes love3{
30%,50%{
height: 160px;
transform: translateY(-75px);
}
70%,100%{
height: 0px;
transform: translateY(0px);
}
}
@keyframes love4{
30%,50%{
height: 180px;
transform: translateY(-60px);
}
70%,100%{
height: 0px;
transform: translateY(0px);
}
}
@keyframes love5{
30%,50%{
height: 200px;
transform: translateY(-35px);
}
70%,100%{
height: 0px;
transform: translateY(0px);
}
}
@keyframes love6{
30%,50%{
height: 180px;
transform: translateY(-60px);
}
70%,100%{
height: 0px;
transform: translateY(0px);
}
}
@keyframes love7{
30%,50%{
height: 160px;
transform: translateY(-75px);
}
70%,100%{
height: 0px;
transform: translateY(0px);
}
}
@keyframes love8{
30%,50%{
height: 125px;
transform: translateY(-60px);
}
70%,100%{
height: 0px;
transform: translateY(0px);
}
}
@keyframes love9{
30%,50%{
height: 60px;
transform: translateY(-30px);
}
70%,100%{
height: 0px;
transform: translateY(0px);
}
}
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>loveheart</title>
</head>
<link rel="stylesheet" href="css/heart.css">
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>