类似液体loading效果

最新推荐文章于 2025-07-09 09:07:54 发布

JustStand

最新推荐文章于 2025-07-09 09:07:54 发布

阅读量227

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_42031498/article/details/106254034

CSS 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了一种基于HTML和CSS实现的水波纹加载动画，通过使用SVG滤镜和CSS动画属性，创建了动态的视觉效果。文章提供了完整的代码示例，包括HTML结构、CSS样式和关键帧动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码，有注释
index.html

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水波纹loading</title>
    <style>
        html {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            /*这三句让弹性盒子内容绝对居中*/
            display: flex;
            justify-content: center;
            align-items: center;

            height: 100vh;
            background-color: #222;
        }

        /*不让svg占据盒子空间*/
        svg {
            width: 0;
            height: 0;
        }

        .loader {
            position: relative;
            /*border: 1px solid silver;*/
            width: 200px;
            height: 200px;
            /*URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。
            这里是 filter: url(svg-url#element-id)*/
            filter: url(#gooey);
        }

        .loader > span {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /*background-color: #fff;*/
            animation: loader 4s ease-in-out infinite;
            /*动画延时：这里给calc计算属性，每个span延时*/
            animation-delay: calc(0.2s * var(--i));
        }

        .loader > span:before {
            content: '';
            position: absolute;
            display: block;
            top: 0;
            width: 40px;
            height: 40px;
            /*这两句让元素水平居中*/
            left: 50%;
            transform: translateX(-50%);
            /*圆*/
            border-radius: 50%;
            box-shadow: 0 0 30px #03a9f4;
            background-image: linear-gradient(#fce4ec, #03a9f4);
        }
        /*所有的span盒子进行该动画*/
        @keyframes loader {
            0% {
                transform: rotate(0deg);
            }
            50%, 100% {
                transform: rotate(360deg);
            }
        }

    </style>
</head>
<body>
<div class="loader">
    <span style="--i:1"></span>
    <span style="--i:2"></span>
    <span style="--i:3"></span>
    <span style="--i:4"></span>
    <span style="--i:5"></span>
    <span style="--i:6"></span>
    <span style="--i:7"></span>
</div>
<svg>
    <filter id="gooey">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
        <feColorMatrix values="1 0 0 0 0
                               0 1 0 0 0
                               0 0 1 0 0
                               0 0 0 20 -10">
        </feColorMatrix>
    </filter>
</svg>
</body>
</html>

效果图
在这里插入图片描述