爱心动效
lix_uan 152 2

效果图

1

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>爱心</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}

ul, ol{
    list-style: none;
}

body{
    height: 100vh;
    background: #000;
    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: 20px;
}

li:nth-child(1){
    background: red;
    animation: love1 4s 0s infinite;
}

li:nth-child(2){
    background: darkcyan;
    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: love4 4s 1s infinite;
}

li:nth-child(7){
    background: darksalmon;
    animation: love3 4s 1.2s infinite;
}

li:nth-child(8){
    background: darkcyan;
    animation: love2 4s 1.4s infinite;
}

li:nth-child(9){
    background: red;
    animation: love1 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(-45px);
    }
    70%,100%{
        height: 0px;
        transform: translateY(0px);
    }
}
预览图
评论区

索引目录