持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第 17 天,点击查看活动详情
前言
大家好,我是爱吃鱼的桶哥Z,最近一直在写 canvas
相关的文章,反而忽略了 CSS
相关的学习,刚好最后又学到了一个新的 CSS
效果,并且里面有一个属性是我之前没有接触过的,今天就分享给大家。首先我们还是先来看一下最终实现的效果,如图所示:
通过上图我们可以看到,当鼠标没有移入时,默认的效果是10个在原地旋转的圆,并且它们的周围还有4个小圆围着旋转;当输入移入时,这个效果会发散开来,在整个屏幕中旋转。这个效果是由纯 CSS
打造的,接下来就让我们一起来看一下这个效果该如何实现吧!
环绕小球
我们先来实现一个小球,并在它周围画出另外四个围着它旋转的小球,然后再把剩余的都画出来,最后添加相关的 hover
效果。老规矩,我们先来看一下基础的 html
,代码如下:
<div class="loader">
<span style="--i:1;"></span>
</div>
因为我们目前只实现一个小球,因此只添加一个 span
标签即可,等后面我们会继续完善 html
。接下来我们就该添加相关的 css
代码,让小球在页面中显示出来。我们先看一下基础的 css
代码,如下:
*{margin: 0; padding: 0; box-sizing: border-box;}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
background: #001f25;
}
.loader {
position: relative;
width: 300px;
height: 300px;
}
.loader span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(calc(36deg * var(--i)));
}
在上述的 css
代码中,我们给 loader
下的 span
标签添加了一个 transform
属性,并且它的值是根据当前 span
标签中的 style
上设置的值而生成的,当然目前添加的这些 css
代码还不会在页面中展示任何内容,接下来我们需要通过 span
标签的 before
伪类将内容画在页面中。
我们来继续完善 css
代码,如下:
.loader span::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 25px;
border-radius: 50%;
background: transparent;
border: 4px solid #00efff;
box-sizing: border-box;
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;
}
可以看到,我们在 span
的 before
伪类中,使用了 box-shadow
这个属性,并且设置了很多层的值,在 MDN官网中,关于 box-shadow
它们数的介绍有如下的介绍:
box-shadow
属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将它们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。
简单来说,我们可以设置多层的属性值,这些属性值分别对应的就是 X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色,当然这些参数都是可选的。
在上面的 css
代码中,我们给 box-shadow
设置了 9层 属性值,最终在页面中展示的效果如下所示:
通过 box-shadow
的属性值,我们可以设置出很多有意思的效果,这里我们已经实现了一个环绕圆了,接下来我们只需要修改 html
就可以实现 10个 环绕圆了,我们一起来看一下修改后的 html
,代码如下:
<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>
修改后的 html
对比之前的,只是添加了另外9个 span
标签,并且在它们的 style
中设置了对应的值,最终展示是效果如下所示:
可以看到添加10个 span
标签后,通过上面 span
样式中的 transform: rotate(calc(36deg * var(--i)));
的属性,将所有的 span
标签进行了一定的旋转,最终就实现了上图中展示的内容。
接下来我们就需要让这些环绕圆旋转起来了,该如何实现呢?
旋转环绕小球
在前面我们已经在页面中将小球都画出来了,接下来我们就该让它们动起来了。在 css
中,我们想要让某个标签动起来,可以通过 animation
属性来设置相关的动画,并添加到对应的标签上,这样就能让对应的标签动起来了。
我们继续来完善 span
标签的 before
伪类代码,如下:
.loader span::before {
...other code
animation: animate 5s linear infinite;
animation-delay: calc(-0.25s * var(--i));
transform-origin: 20px;
transition: 2s;
}
@keyframes animate {
0% {
transform: rotate(0);
filter: hue-rotate(0deg);
}
100% {
transform: rotate(360deg);
filter: hue-rotate(360deg);
}
}
上述的代码中,我们使用了一个 filter
属性,它的值为 hue-rotate
,这个属性值在之前的开发中,我从没使用过,通过这个实例,我才知道 css
中居然还有这么好玩的属性,如果你还不了解这个属性值,可以点击这里进行查看,或者查看张鑫旭老师的这篇文章,写的也是非常的有意思。
通过 animation
属性添加了相关的动画,在动画中使用 hue-rotate
属性值,从而实现圆圈颜色的变换和旋转,最终的效果如下所示:
写到这里,这个效果我们已经实现了90%,还剩下最后的 hover
效果,让我们来完成剩下的内容,代码如下:
.loader:hover span::before {
box-shadow: 0 0 20px #00efff,
-150px -150px 0 #00efff,
-150px -150px 20px #00efff,
150px 150px 0 #00efff,
150px 150px 20px #00efff,
150px -150px 0 #00efff,
150px -150px 20px #00efff,
-150px 150px 0 #00efff,
-150px 150px 20px #00efff;
transform-origin: 250px;
}
在 hover
中,我们设置了 transform-origin
属性值,它的主要作用是将旋转的原点设置更大,最终的完整代码和实现效果可以在这里进行查看:
总结
在这一篇文章中,我们通过学习 box-shadow
属性以及 filter: hue-rotate()
,实现了旋转的小球,关于 box-shadow
更多的妙用,我们可以在实际的业务中自行去探索。
最后,如果这篇文章有帮助到你,❤️关注+点赞❤️鼓励一下作者,谢谢大家