心型加载动画

最新推荐文章于 2024-09-16 23:39:36 发布

吕杰刚

最新推荐文章于 2024-09-16 23:39:36 发布

阅读量206

点赞数 1

文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_46389377/article/details/107965197

版权

前几天看见有个大哥写了一个心型加载动画，我只学了H5+C3还只是小白寻思也能写出来一个，下面是代码，原版在这里做的不是很好，大家看看就好，不喜勿喷。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box {
            width: 500px;
            height: 1000px;
            margin: 150px auto;
        }

        ul li {
            float: left;
            list-style: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin: 200px 4px;
        }

        .transit {
            transition: all 1s;
        }

        .li-1 {
            background-color: #4DB3C2;
            animation: movefrist 1s 0.8s infinite alternate;
        }

        .li-2 {
            background-color: #65ACD4;
            animation: movesecond 1s 0.9s infinite alternate;
        }

        .li-3 {
            background-color: #6BA9D6;
            animation: movethree 1s 1.0s infinite alternate;
        }

        .li-4 {
            background-color: #84A4E2;
            animation: movefour 1s 1.1s infinite alternate;
        }

        .li-5 {
            background-color: #A19DE8;
            animation: movefive 1s 1.2s infinite alternate;
        }

        .li-6 {
            background-color: #BD95E5;
            animation: movefour 1s 1.3s infinite alternate;
        }

        .li-7 {
            background-color: #D58FDA;
            animation: movethree 1s 1.4s infinite alternate;
        }

        .li-8 {
            background-color: #E68BC8;
            animation: movesecond 1s 1.5s infinite alternate;
        }

        .li-9 {
            background-color: #EF8AB2;
            animation: movefrist 1s 1.6s infinite alternate;
        }

        @keyframes movefrist {
            0% {
                border-radius: 10px;
                margin-top: 199px;
            }

            100% {
                width: 20px;
                height: 60px;
                border-radius: 10px 10px 10px 10px;
                margin-top: 180px;
            }
        }

        @keyframes movesecond {
            0% {
                border-radius: 10px;
                margin-top: 199px;
            }

            100% {
                width: 20px;
                height: 120px;
                border-radius: 10px 10px 10px 10px;
                margin-top: 155px;
            }
        }

        @keyframes movethree {
            0% {
                border-radius: 10px;
                margin-top: 199px;
            }

            100% {
                width: 20px;
                height: 160px;
                border-radius: 10px 10px 10px 10px;
                margin-top: 130px;
            }
        }

        @keyframes movefour {
            0% {
                border-radius: 10px;
                margin-top: 199px;
            }

            100% {
                width: 20px;
                height: 180px;
                border-radius: 10px 10px 10px 10px;
                margin-top: 140px;
            }
        }

        @keyframes movefive {
            0% {
                border-radius: 10px;
                margin-top: 199px;
            }

            100% {
                width: 20px;
                height: 180px;
                border-radius: 10px 10px 10px 10px;
                margin-top: 160px;
            }
        }

        /* 对位代码相同 没有必要多写 */
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li class="li-1 transit"></li>
            <li class="li-2 transit"></li>
            <li class="li-3 transit"></li>
            <li class="li-4 transit"></li>
            <li class="li-5 transit"></li>
            <li class="li-6 transit"></li>
            <li class="li-7 transit"></li>
            <li class="li-8 transit"></li>
            <li class="li-9 transit"></li>
        </ul>
    </div>
</body>

</html>