旋转水滴加载效果

小丞同学

发布于 2021-08-16 15:59:22

7090

发布于 2021-08-16 15:59:22

文章被收录于专栏：小丞前端库

旋转水滴加载效果

利用了css的var()函数实现的旋转水滴效果

实现效果

实现思路

将多个小圆圈定位在一起，再添加动画
给每个小圆圈添加一定的动画延时，产生这样一个圆圈一个圆圈出来的效果

实现要点

在添加动画延时的时候，很多时候都是之间给每个元素添加延时，这样的代码就会冗余，这样当要操作的元素数量过多时，是不太好操作的，css3新增了函数的方法，可以利用var函数来获取属性值

因此我们可以这样来操作

 <span style ="--ljc:1;"></span>
 <span style ="--ljc:2;"></span>
 <span style ="--ljc:3;"></span>  
 <span style ="--ljc:4;"></span>
 <span style ="--ljc:5;"></span>
 <span style ="--ljc:6;"></span>
 <span style ="--ljc:7;"></span>
 <span style ="--ljc:8;"></span>
 <span style ="--ljc:9;"></span>
 <span style ="--ljc:10;"></span>

给每个小圆圈添加一个属性，根据var的语法规定，只能获取--开头的属性，因此加上--，属性值我给它们排序，这样我能规定好每个小圆圈延时多久

在CSS代码中我们需要给span盒子添加属性

animation-delay: calc(0.2s * var(--ljc));

calc表明括号内是函数，通过var(--ljc)来获取属性下的值，也就是123456789这些，这样每个span延时的时间就实现了

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: black;
        }
        .loading {
            position: relative;
            width: 200px;
            height: 200px;
        }
        .loading span {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            animation: rotate 4s ease-in-out infinite;
            animation-delay: calc(0.2s * var(--ljc));
        }
        .loading span::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(rgb(39,122,218),skyblue);
        }
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            45%,100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="loading">
        <span style ="--ljc:1;"></span>
        <span style ="--ljc:2;"></span>
        <span style ="--ljc:3;"></span>  
        <span style ="--ljc:4;"></span>
        <span style ="--ljc:5;"></span>
        <span style ="--ljc:6;"></span>
        <span style ="--ljc:7;"></span>
        <span style ="--ljc:8;"></span>
        <span style ="--ljc:9;"></span>
        <span style ="--ljc:10;"></span>
    </div>
</body>
</html>