『 纯 CSS 实现』使用 CSS 开发一个炫酷旋转小球

2,726 阅读6分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第 17 天,点击查看活动详情

前言

大家好,我是爱吃鱼的桶哥Z,最近一直在写 canvas 相关的文章,反而忽略了 CSS 相关的学习,刚好最后又学到了一个新的 CSS 效果,并且里面有一个属性是我之前没有接触过的,今天就分享给大家。首先我们还是先来看一下最终实现的效果,如图所示:

1.gif

通过上图我们可以看到,当鼠标没有移入时,默认的效果是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;
}

可以看到,我们在 spanbefore 伪类中,使用了 box-shadow 这个属性,并且设置了很多层的值,在 MDN官网中,关于 box-shadow它们数的介绍有如下的介绍:

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将它们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

简单来说,我们可以设置多层的属性值,这些属性值分别对应的就是 X轴偏移量Y轴偏移量模糊半径扩散半径颜色,当然这些参数都是可选的。

在上面的 css 代码中,我们给 box-shadow 设置了 9层 属性值,最终在页面中展示的效果如下所示:

image.png

通过 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 中设置了对应的值,最终展示是效果如下所示:

image.png

可以看到添加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 属性值,从而实现圆圈颜色的变换和旋转,最终的效果如下所示:

demo1.gif

写到这里,这个效果我们已经实现了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 更多的妙用,我们可以在实际的业务中自行去探索。

最后,如果这篇文章有帮助到你,❤️关注+点赞❤️鼓励一下作者,谢谢大家

往期回顾

哇哦,icon 还能这么玩?

『 实战』从0到1,带你开发开发一款令人惊叹的时钟特效

CSS 复刻 iPhone14,并接到了优弧的电话😏,还不快接电话?

今年中秋的月亮真漂亮~

『 纯 CSS 实现』哇塞,彩虹🌈还能这么玩?

『 禁止吸烟🚭』纯 CSS 实现 | 禁烟也能做的这么酷炫

送你一个可爱的大圆脸😁,速来~

这么炫酷的 3D Menu 效果,真的不来看看?

产品经理:你这个效果不行,我想要一个五彩斑斓的黑!我:。。。