<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
width: 100%;;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #232e6d;
}
ul{
height: 20px;
}
li{
float: left;
width: 20px;
height: 20px;
border-radius: 20px;
margin-right: 10px;
}
li:nth-child(1){
background-color: #f62e74;
animation: love1 4s infinite;
}
li:nth-child(2){
background-color: #f45330;
animation: love2 4s infinite;
animation-delay: 0.15s;
}
li:nth-child(3){
background-color: #ffc883;
animation: love3 4s infinite;
animation-delay: 0.3s;
}
li:nth-child(4){
background-color: #30d268;
animation: love4 4s infinite;
animation-delay: 0.45s;
}
li:nth-child(5){
background-color: #006cb4;
animation: love5 4s infinite;
animation-delay: 0.6s;
}
li:nth-child(6){
background-color: #784697;
animation: love4 4s infinite;
animation-delay: 0.75s;
}
li:nth-child(7){
background-color: #ffc883;
animation: love3 4s infinite;
animation-delay: 0.9s;
}
li:nth-child(8){
background-color: #f45330;
animation: love2 4s infinite;
animation-delay: 1.05s;
}
li:nth-child(9){
background-color: #f62e74;
animation: love1 4s infinite;
animation-delay: 0.3s;
}
@keyframes love1{
0%{
height: 20px;
}
30%,
50%{
height: 60px;
transform: translateY(-30px);/* translateY() 在页面垂直移动元素 */
}
75%,
100%{
height: 20px;
transform: translateY(0);
}
}
@keyframes love2 {
30%,
50% {
height: 125px;
transform: translateY(-62.5px);
}
75%,
100% {
height: 20px;
transform: translateY(0);
}
}
@keyframes love3 {
30%,
50% {
height: 160px;
transform: translateY(-75px);
}
75%,
100% {
height: 20px;
transform: translateY(0);
}
}
@keyframes love4 {
30%,
50% {
height: 180px;
transform: translateY(-60px);
}
75%,
100% {
height: 20px;
transform: translateY(0);
}
}
@keyframes love5 {
30%,
50% {
height: 190px;
transform: translateY(-45px);
}
75%,
100% {
height: 20px;
transform: translateY(0);
}
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
爱心动态网页设计
最新推荐文章于 2023-08-22 09:05:50 发布