CSS实现旋转氛围灯
前言
这几天看见一个旋转氛围灯效果,哎!!!感觉不错,来手动搞一搞,给大家具体剖析一下怎么实现的,我们也去实现一个
布局
首先我们外层利用一个大盒子对小盒子进行包裹
// 布局
<div class="box">
<div class="loader">
</div>
</div>
// 样式
.box {
position: relative;
width: 300px;
height: 300px;
margin: 0 50px;
}
.loader {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
}
我们以30度为旋转角度所以内部需要12个小球用来进行旋转,在小盒子里再加12个span
// style="--i:1" 这里的--i是用于css样式时用var来取标签定义的值
<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>
<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>
</div>
小盒子里面把后期需要旋转的小球添加的阴影加上
.loader span:nth-child(3n + 3)::before {
background-color: #fff;
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff,
0 0 50px #fff;
/* animation: animateSquare 2s linear infinite; */
transform-origin: 75px;
}
然后我们让这些颜色去掉,同时利用before伪元素来加上需要的小球
<div class="box">
<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>
<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>
</div>
<h2>神奇的 <b>CSS</b></h2>
</div>
.loader {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
}
.loader span {
position: absolute;
width: 100%;
height: 100%;
/* 旋转的角度,控制圆圈位置(可以自行调整转动速度,及小球个数) */
transform: rotate(calc(30deg * var(--i)));
}
.loader span::before {
content: "";
position: absolute;
border-radius: 10px;
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, 0.2);
}
.loader span:nth-child(3n + 3)::before {
background-color: #fff;
/* 小球跳动变换的阴影 */
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff,
0 0 50px #fff;
/* 设置旋转基点 */
transform-origin: 75px;
}
样式及动画
小球转动起来了,接下来需要的是闪动效果
需要的动画
// 盒子转动
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
// 小球跳动
@keyframes throb {
0%,
25% {
transform: rotate(0deg);
}
75%,
90%,
100% {
transform: rotate(180deg);
}
}
把动画加上去就完成了旋转氛围灯效果
完整代码
结尾
实现这个效果还是比较简单的主要是其思路,还有对css的使用,比如:transform: rotate(calc(30deg * var(--i)));
这是从页面style上定义的i值获取每个小球转动的位置,transform-origin
:用来确定旋转的基点位置,
animation-timing-function
用来指定动画如何完成一个周期;这就是实现效果比较主要的三个css属性。如果上面有任何问题欢迎指出,或者有啥更加好的想法大家一起讨论
转载自:https://juejin.cn/post/7180943907616718908