持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情
前言
最近越发意识到自己的 CSS 薄弱，也去补了不少知识点，今天我将部分知识点总和，用这些知识点带大家一步步完成一个案例，来巩固 CSS 基础。
本文会带大家使用 CSS 一步步实现一个星光璀璨的效果。
实现过程
第一步，我们从样式的初始化开始。
样式初始化
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
background-color: #001f25;
}
首先为了美观，我们先通过通配符 * 将所有标签的 外边距 和 内边距 设置为 0。当然大家在日常开发的时候可不能用 * 直接一把梭了，而应该考虑 reset.css 或 normolize.css 来统一风格。
然后将 body 的宽高限制为一屏，且通过 flex 布局进行居中。
圆点绘制
接下来我们就开始绘制主体部分了，首先我们要先绘制 10 个圆点。
圆相信大家都会画吧，在相同的宽高下，通过设置 border-radius: 50% 来达到圆的效果。
10 个圆好画，那怎么才能将这 10 个圆围成一个圆形呢？
这里我们要用到 transform 的 rotate 属性，rotate 可以将目标按指定角度旋转。有的小伙伴可能就疑惑了，圆就算再怎么旋转，不应该还是在一个位置，怎么会围成一个圆呢？
我们来看看怎么做：
<body>
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
.loader {
position: relative;
width: 300px;
height: 300px;
}
.loader span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.loader span::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: transparent;
border: 4px solid #00efff;
box-sizing: border-box;
}
首先我们将圆的容器 .loader 设置宽高，针对每个 span ，设置其宽高和 .loader 一样 ，然后通过 伪元素 的形式画圆，并让圆的背景色继承父元素。
此时的效果如下：
注意，这不是单单一个宽高等于 300 的 span 标签，而是 10 个 重叠 在了一起。
那么在这个基础上，我们对每个 span 进行旋转，是不是就不会发生上面说的尴尬情况了？
那么每个 span 应该旋转多少度呢？我们刚刚绘制了 10 个圆，如果要围成一圈的话，每个圆需要等距离，一个圆是 360°，10 等分就是 36°了。因此第一个圆应该旋转 36°，第二个圆应该旋转 36° * 2，以此类推。
为了方便计算，我们给每个 span 元素按顺序从 1 到 10 设置一个 css 变量，用来表示它们的编号。
<body>
<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>
</div>
</body>
然后给 span 标签添加旋转效果。
.loader span {
...
transform: rotate(calc(36deg * var(--i)));
}
如此一来，这 10 个 span 标签就会围成一个圆。
是不是恍然大悟？
给圆点绘制阴影
.loader span::before {
box-shadow: 0 0 20px #00efff;
}
阴影的绘制我们通过 box-shadow 就可以完成了。
我们来看看效果：
绘制 4 个依附圆点
圆点画完，我们接下来给每个圆点绘制 4 个包围着它们的 依附圆点 。
我们的圆点是通过 伪元素 实现的，想要在它的周围添加圆点，我们需要使用到 box-shadow 属性。
首先我们要知道，box-shadow 是可以设置多个阴影的，且 阴影的作用对象是使用阴影的物体，这意味着 圆的投影也是圆，那如果我们想使用 box-shadow 绘制圆，就可以用阴影来 模拟 。
首先 box-shadow 的第一个值我们在上一步中是用来给 10 个圆点各自添加阴影高光用的。那么接下来我们来绘制第一个依附圆点。
.loader span::before {
...
box-shadow: 0 0 20px #00efff,
-30px -30px 0 #00efff；
}
此时的效果如下：
接下来给这个依附圆点一个阴影高光：
.loader span::before {
...
box-shadow: 0 0 20px #00efff,
-30px -30px 0 #00efff,
-30px -30px 20px #00efff;
}
我们再来看看效果：
同理，其他 3 个依附圆点也是通过不断绘制阴影实现的。
.loader span::before {
box-shadow: 0 0 20px #00efff,
-30px -30px 0 #00efff,
-30px -30px 20px #00efff,
30px 30px 0 #00efff,
30px 30px 20px #00efff,
30px -30px 0 #00efff,
30px -30px 20px #00efff,
-30px 30px 0 #00efff,
-30px 30px 20px #00efff;
}
这个时候已经很漂亮啦，但是还不够，我们要让它“动”起来。
让圆点们动起来
为了让圆点们动起来，我们就需要用到动画 animation 了。
.loader span::before {
animation: animate 5s linear infinite;
}
这里将动画状态设置为 5 秒线性完成，且循环播放，接下来我就要创建一个名为 animate 的动画了。
@keyframes animate {
0% {
transform: rotate(0deg);
filter: hue-rotate(0eeg);
}
100% {
transform: rotate(360deg);
filter: hue-rotate(360deg);
}
}
我们通过动画使圆点们运动起来，具体的，我们从 0% 开始时，到 100% 结束时，用上文介绍的 rotate 属性让圆点们进行绕圈运动，同时在这个过程中，通过 hue-ratate 函数，以 改变色相角度 的方式来改变圆点的颜色。
有的小伙伴可能不懂什么是色相。我给大家看个图帮助大家理解：
这个就是色相环，而 hue-ratate 函数传入指定的角度就可以改变颜色。
如此一来，我们就可以让 4 个依附圆点运动起来了。
似乎不够带感，如果能让 10 个圆点在小范围内也一起旋转起来就好了。这里我们就要用到 transform-origin 这个 css 属性了。
我们看看 MDN 对这个属性的介绍：
transform-originCSS 属性让你更改一个元素变形的原点。
我们先理清一下，从这个名字我们就应该知道，它是针对于 transform 变形来说的。那么改变原点是什么意思呢？
圆的原点是圆心对吧，正方形的原点是交叉线的交点对吧，transform-origin 默认值就是 center，也就是物体的正常原点。
那么为了让我们的 10 个小圆点能跟着小范围旋转，我们就要让圆点的原点偏移（否则圆点应用了 rotate 旋转是看不出来的，和运动中的轮胎一个道理）。
.loader span::before {
...
transform-origin: 20px;
}
此时效果如下：
动的更带感点
为了让效果更灿烂点，我们在 hover 态的时候，将依附的 4 个圆点偏移量从 30px 变为 200px，同时通过 transform-origin 将 10 个圆点各自的旋转原点偏移变为 250px。
.loader:hover span::before {
box-shadow: 0 0 20px #00efff,
-200px -200px 0 #00efff,
-200px -200px 20px #00efff,
200px 200px 0 #00efff,
200px 200px 20px #00efff,
200px -200px 0 #00efff,
200px -200px 20px #00efff,
-200px 200px 0 #00efff,
-200px 200px 20px #00efff;
transform-origin: 250px;
}
最终效果如下：
Github 源码地址
源码已经上传至 github，有需要的小伙伴可以自行取用。
juejin-demo/css-star-demo at main · catwatermelon/juejin-demo (github.com)
码上掘金
结束语
本文就到此结束了，希望大家阅读本文能所收获，同时也希望大家能像这个动效一样，星光璀璨。
如果小伙伴们有别的想法，欢迎留言，让我们共同学习进步💪💪。
如果文中有不对的地方，或是大家有不同的见解，欢迎指出🙏🙏。
如果大家觉得所有收获，欢迎一键三连💕💕。
