开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情

前言

这几天看见一个旋转氛围灯效果，哎！！！感觉不错，来手动搞一搞，给大家具体剖析一下怎么实现的，我们也去实现一个

布局

首先我们外层利用一个大盒子对小盒子进行包裹

// 布局
 <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属性。如果上面有任何问题欢迎指出，或者有啥更加好的想法大家一起讨论