CSS 3.0结合SVG实现水滴穿透加载动画

给大家分享一个用CSS 3.0结合SVG实现一个水滴穿透加载动画，效果如下：
以下是代码实现，欢迎大家复制、粘贴和收藏。
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS 3.0结合SVG实现水滴穿透加载动画</title>
        <style>
            :root {
                --blue: #0a2bc5;
                --yellow: #ffcc2f;
            }

            body {
                margin: 0;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                font-family: 'Poppins', sans-serif;
                background: #000;
                color: var(--blue);
            }

            .container {
                filter: url('#filter');
                display: flex;
                justify-content: center;
                align-items: center;
            }

            span {
                letter-spacing: 10px;
                font-size: 8rem;
            }

            .dot {
                position: absolute;
                background: var(--blue);
                width: 22px;
                height: 22px;
                border-radius: 60% 70% 50% 60% / 65% 66% 60% 65%;
                animation: 6s dot-move ease infinite;
            }

            @keyframes dot-move {

                0%,
                100% {
                    transform: translate(370px);
                }

                50% {
                    transform: translate(-370px);
                }
            }

            .dot:after {
                width: 17px;
                height: 17px;
                content: '';
                position: absolute;
                background: var(--blue);
                border-radius: 50% 60% 60% 70% / 60% 65% 65% 65%;
                left: 25px;
                top: 3px;
                animation: 6s dot-after-move ease infinite;
            }

            @keyframes dot-after-move {
                0% {
                    left: 0px;
                }

                5% {
                    left: 35px;
                }

                45% {
                    left: 0px;
                }

                50% {
                    left: 0px;
                }

                55% {
                    left: -30px;
                }

                95% {
                    left: 0px;
                }

                100% {
                    left: 0;
                }
            }

            svg {
                position: absolute;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <span>LOADING</span>
            <span class="dot"></span>
        </div>
        <svg>
            <defs>
                <!-- 定义滤镜 -->
                <filter id="filter">
                    <!-- 高斯模糊 -->
                    <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
                    <!-- 颜色矩阵 -->
                    <feColorMatrix in="blur" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -20" result="filter"/>
                    <!-- 图像相交 -->
                    <feComposite in="SourceGraphic" in2="filter" operator="atop" />
                </filter>
            </defs>
        </svg>
    </body>

</html>
CSS 3.0结合SVG实现水滴穿透加载动画

猜你喜欢
