likes
comments
collection
share

基于css3写出的流水加载效果

作者站长头像
站长
· 阅读数 24

准备部分

这里写入基本的html样式，这里还设置了水球的css样式，用于css样式中的计算--i:1是一种自定义的CSS变量，可能用于控制样式中的计数

<body>
    <div class="box">
      <div class="loader">
            <!-- 这里设置了水球的css样式变量，用于css样式中的计算 -->
            <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>
            <span style="--i:8"></span>
        </div>
    </div>
</body>

设置基本的css背景及其样式

基于css3写出的流水加载效果

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .box {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #0c1b21;
    }
    /* 设置流水区域 */
       .loader {
        position: relative;
        width: 250px;
        height: 250px;
        background: #666;
        animation: animate 12s linear infinite;
    }

下面进行详细的css设计

这里通过伪元素设计了第一个小球的效果，通过定位定位到左上角，，设置了大小为40，并且设置了颜色和圆角色设置，同时添加了阴影效果，形成了如下的圆球水滴效果，通过渐变函数linear-gradient是一个渐变函数，用于创建线性渐变背景，设置了颜色和倾斜的角度

基于css3写出的流水加载效果

    .loader span {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
      /* 定位 伪元素，设置流水的珠子 */
      .loader span::before {
        content: '';
        position: absolute;
        top: 0;
        width: 40px;
        height: 40px;
        /* 珠子颜色设置 */
        background: linear-gradient(45deg, #c7eeff, #03a9f4);
        border-radius: 50%;
        /* 设置阴影 */
        box-shadow: 0 0 30px #00bcd4;
    }

接下来根据html中定义的css变量，来设置不同方向的数据

基于css3写出的流水加载效果

.loader span{
        /* 设置不同方向的小球 */
        transform: rotate(calc(45deg*var(--i)));
    }

将小球向内收缩一部分

基于css3写出的流水加载效果

.loader span::before {
        left: calc(50% - 20px);
    }

动画设置

在这里设置了旋转动画，并且在整个区域添加入了动画

基于css3写出的流水加载效果

/* 这里设置了旋转动画 */
    @keyframes animate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

接下来补一下html

这里设置了4个span元素，用来形成四个小球，在容器内沿着小球的方向进行转动，形成一个如下的的效果，并且通过在html中给span元素加入css变量来控制每个小球的延迟效果

基于css3写出的流水加载效果

去掉背景颜色后

基于css3写出的流水加载效果

<body>
    <div class="box">
        <div class="loader">
            <!-- 这里设置了水球的css样式变量，用于css样式中的计算 --i:1是一种自定义的CSS变量，可能用于控制样式中的计数 -->
            <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>
            <span style="--i:8"></span>
            <!-- 这里设置了光晕效果，使得出现5个转动的小球 -->
            <span class="rotate" style="--j:0"></span>
            <span class="rotate" style="--j:1"></span>
            <span class="rotate" style="--j:2"></span>
            <span class="rotate" style="--j:3"></span>
            <span class="rotate" style="--j:4"></span>
        </div>
        <div class="word">加载中</div>
    </div>
</body>


   .rotate {
        animation: animate 4s ease-in-out infinite;
        /* 设置延迟 */
        animation-delay: calc(-0.2s*var(--j));
    }
     .loader {
        filter: url(#fluid);
        /* 去掉临时背景颜色为透明 */
        background: transparent;
    }

接下来补全所需要的html

这里不全了所需要的html，加入了svg部分，使用过svg，对图形进行高斯模糊处理，然后对图形的颜色进行变化，通过颜色矩阵来实现颜色变化，这里使用的颜色矩阵将每个像素的红、绿、蓝三个通道的颜色值分别乘以1，不变化；将透明度乘以20，增加透明度；最后将透明度减去10，进一步增加透明度。这段代码可能被使用在创建视觉效果中，比如给图像添加模糊效果并调整其透明度，从而实现一种"流体"或"柔和"的视觉效果 并且定义了一个filter的滤镜效果 “in"属性的值为"SourceGraphic”，表示将滤镜应用在源图形上，“stdDeviation"属性的值为"10”，表示高斯模糊的参数，即模糊程度

<body>
    <div class="box">
        <!-- 这里使用了svg，svg是可缩放矢量图形的标签，通过创建和操作svg，使得图形通过缩放而不失去真的在各种尺寸和分辨率下呈现 -->
        <!-- 这段代码的作用是先对图形进行高斯模糊处理，然后对图形的颜色进行变换。具体的颜色变换可以通过颜色矩阵来实现，
            这里使用的颜色矩阵将每个像素的红、绿、蓝三个通道的颜色值分别乘以1，不变化；将透明度乘以20，增加透明度；
            最后将透明度减去10，进一步增加透明度。这段代码可能被使用在创建视觉效果中，比如给图像添加模糊效果并调整其透明度，
            从而实现一种"流体"或"柔和"的视觉效果 -->
        <svg>
            <!-- 这是定义一个滤镜效果的元素，其中"id"属性的值为"fluid"，用于给滤镜效果命名。 -->
            <filter id="fluid">
                <!-- 这是一个高斯模糊滤镜效果，用于对图形进行模糊处理。“in"属性的值为"SourceGraphic”，表示将滤镜应用在源图形上，
                    “stdDeviation"属性的值为"10”，表示高斯模糊的参数，即模糊程度。 -->
                <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
                <!-- 这是一个颜色矩阵滤镜效果，用于对图形的颜色进行变换。
                    "values"属性的值为一个包含20个数字的字符串，表示颜色矩阵的变换矩阵。 -->
                <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>
        <div class="loader">
            <!-- 这里设置了水球的css样式变量，用于css样式中的计算 --i:1是一种自定义的CSS变量，可能用于控制样式中的计数 -->
            <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>
            <span style="--i:8"></span>
            <!-- 这里设置了光晕效果，使得出现5个转动的小球 -->
            <span class="rotate" style="--j:0"></span>
            <span class="rotate" style="--j:1"></span>
            <span class="rotate" style="--j:2"></span>
            <span class="rotate" style="--j:3"></span>
            <span class="rotate" style="--j:4"></span>
        </div>
        <div class="word">加载中</div>
    </div>
</body>

再继续设置svg的样式，这里将被svg偏移的容器位置归于中心位置，并且设置了文字效果及其设置了文字的缩放动画

    svg {
        width: 0;
        height: 0;
    }

    .word {
        position: absolute;
        color: #fff;
        font-size: 1.2em;
        animation: words 3s linear infinite;
    } 
        /* 这里设置了文字的缩放动画 */
    @keyframes words {
        0% {
            transform: scale(1.2);
        }

        25% {
            transform: scale(1);
        }

        50% {
            transform: scale(0.8);
        }

        75% {
            transform: scale(1);
        }

        100% {
            transform: scale(1.2);
        }
    }

效果展示

基于css3写出的流水加载效果

总结

实现这个效果关键在最后的那个svg的使用，通过添加svg给了一个高斯模糊的效果，从而才会使得明显的小球变成了这种连在一起的流动液体样式的小球，要学习一下svg效果，在他也是属于html5里面的一部分内容，仅供自己学习记录和新的展示

转载自:https://juejin.cn/post/7263064267560976442
评论
请登录