css3制作小球滚动动画-backdrop-filter

最新推荐文章于 2023-03-03 10:36:04 发布

行行皆辛苦

最新推荐文章于 2023-03-03 10:36:04 发布

阅读量387

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/dream_will_true/article/details/129199546

版权

css3制作小球滚动动画，效果如下

在这里插入图片描述
运用特殊属性
CSS 滤镜 : backdrop-filter
backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果。

backdrop-filter和filter的区别

filter：该属性将模糊或颜色偏移等图形效果应用于元素。

backdrop-filter：该属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

附HTML

    <div class="container">
        <div class="loder one">
            <span></span>
            <span></span>
        </div>
        <div class="loder two">
            <span></span>
            <span></span>
        </div>
    </div>

附css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    background-color: #333638;

}
.container .loder{
    position: relative;
    width: 150px;
    height: 150px;
    margin: 50px;

}
.loder.one span{
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(227, 126, 236);
    border-radius: 50%;
    position: absolute;
    left: 0px;
    top: 0px;
    animation: move  ease-in-out 2s infinite;

}
.loder.one span::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 40%;
    bottom: -100px;
    background-color: #000;
    border-radius: 50%;
    transform: rotate(50%,50%);
    background: radial-gradient(rgba(211, 4, 234, 0.1),transparent,transparent);
}
.loder.one span:nth-child(2):before{
    background: radial-gradient(rgba(213, 98, 226, 0.04),transparent,transparent);
}
.loder.one span:nth-child(2){

    background:  rgb(234, 195, 237,0.2);
    backdrop-filter: blur(10px);
    animation-delay: -1s;
}
@keyframes move {
    0%{
        transform: translate(-80px);
    }
    50%{
        transform: translate(80px);
    }
    100%{
        transform: translate(-80px);
    } 
}