html跳转 effect,跳动的心.html

跳动的心

*{

margin: 0;

padding: 0;

list-style: none;

}

.wangCode{

display: flex;

align-items: center;

justify-content: center;

background-color: #232e6d;

height: 100vh;

}

.wangCode ul {

height: 200px;

}

.wangCode ul li{

width: 20px;

height: 20px;

border-radius: 20px;

margin-right: 20px;

float: left;

}

li:nth-child(1){

animation: love1 4s infinite;

background-color: red;

}

li:nth-child(2){

animation: love2 4s infinite;

background-color: hotpink;

animation-delay: 0.15s;

}

li:nth-child(3){

animation: love3 4s infinite;

background-color: yellowgreen;

animation-delay: 0.3s;

}

li:nth-child(4){

animation: love4 4s infinite;

background-color: palegreen;

animation-delay: 0.45s;

}

li:nth-child(5){

animation: love5 4s infinite;

background-color:peru;

animation-delay: 0.6s;

}

li:nth-child(6){

animation: love4 4s infinite;

background-color: rgb(0, 255, 0);

animation-delay: 0.75s;

}

li:nth-child(7){

animation: love3 4s infinite;

background-color: salmon;

animation-delay: 0.9s;

}

li:nth-child(8){

animation: love2 4s infinite;

background-color: blueviolet;

animation-delay: 1.05s;

}

li:nth-child(9){

animation: love1 4s infinite;

background-color: pink;

animation-delay: 0.15s;

}

@keyframes love1 {

30%,50%{height: 60px;transform: translateY(-30px);}

70%,100%{height: 20px;transform: translateY(0px);}

}

@keyframes love2 {

30%,50%{height: 125px;transform: translateY(-60px);}

70%,100%{height: 20px;transform: translateY(0px);}

}

@keyframes love3 {

30%,50%{height: 160px;transform: translateY(-75px);}

70%,100%{height: 20px;transform: translateY(0px);}

}

@keyframes love4 {

30%,50%{height: 180px;transform: translateY(-60px);}

70%,100%{height: 20px;transform: translateY(0px);}

}

@keyframes love5 {

30%,50%{height: 190px;transform: translateY(-45px);}

70%,100%{height: 20px;transform: translateY(0px);}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史