css3动画loding

最新推荐文章于 2023-07-10 19:15:55 发布

行行皆辛苦

最新推荐文章于 2023-07-10 19:15:55 发布

阅读量261

点赞数

文章标签： css3 css 前端

本文链接：https://blog.youkuaiyun.com/dream_will_true/article/details/129198881

版权

使用css3制作loding 动画效果，效果如下

在这里插入图片描述

关键帧运用
filter: hue-rotate //
transform: scale(); // 缩放

filters是CSS3里新增的一种神奇的功能，一般我们提及滤镜，就会想到使用PhotoShop制作的图片，但是使用CSS滤镜不需要任何作图软件，仅使用CSS就会生成多种的滤镜效果，例如模糊效果、透明效果、色彩反差调整等等；同时，CSS滤镜不仅可以对图片进行滤镜处理，还可以对网页元素甚至视频进行滤镜处理。

在这里插入图片描述

附HTML

   <div class="box">
        <div class="cantent">
            <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>
            <span style="--i:9;"></span> 
            <span style="--i:10;"></span>
            <span style="--i:11;"></span>
            <span style="--i:12;"></span>
            <span style="--i:13;"></span>
            <span style="--i:14;"></span>
            <span style="--i:15;"></span>
            <span style="--i:16;"></span>  
            <span style="--i:17;"></span>
            <span style="--i:18;"></span>
            <span style="--i:19;"></span>
            <span style="--i:20;"></span>
        </div>       
    </div>

css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}
.box{
    background-color: #2e302e;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;  
}
.cantent{
    position: relative;
    width: 120px;
    height: 120px;
    animation: filtera 3s linear infinite;
}
.cantent>span{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: rotate(calc(20deg * var(--i)));
}
.cantent span::before{
    position: absolute;
    content: '';
    width: 12px;
    height: 12px;
    background-color: #00ff00;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff00,0 0 20px #00ff00 ,0 0 30px #00ff00, 0 0 60px #00ff00,0 0 80px #00ff00,0 0 100px #00ff00;
    animation: bigsmall 1.8s calc(0.1s * var(--i)) linear infinite;
}
@keyframes bigsmall{
    0%
    {
      transform: scale(1);
    }
    80%,100%
    {
        transform: scale(0);
    }
}
@keyframes filtera {
    0%
    {
        filter: hue-rotate(0deg);
    }
    100%
    {
        filter: hue-rotate(360deg);
    }
    
}