手把手教你用CSS实现”七珠合一“

一条会coding的Shark
2,279 阅读3分钟

前言

这回给大伙带来一个比较炫酷的加载内容，从效果上看我们暂且称它为“七珠合一”，可以看看下面码上掘金的效果预览。话不多说，咱们直接开写。

效果预览

HTML结构

从效果上看有七颗珠子合并到一起，因此我们在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>
   </div>

span元素就是我们所需要的珠子，对于<span style="--i:n">的样式，其实在我之前的文章里有提到过，--i:n是一种自定义CSS变量，这些自定义CSS变量用于控制每个字母元素的动画延迟。

这段代码的效果是创建好基本结构。通过自定义CSS变量来控制每个字母元素的动画延迟，具体样式和表现可能需要添加额外的CSS样式来定义。

CSS设计

接下来就是进入到样式层面的设计中了。在此效果的样式设计中依旧少不了自定义动画，因此首先来介绍一下这个自定义动画吧，这里我们请出animate动画代码。

@keyframes animate {
    0%{
        transform: rotate(0deg);
    }
    50%,100%{
        transform: rotate(360deg);
    }
}

这段代码定义了一个名为animate的关键帧动画，0%表示动画的起始状态，50%和100%表示动画的中间和结束状态。transform: rotate(0deg)定义动画的起始状态为不旋转，角度设置为 0 度。transform: rotate(360deg)定义动画的中间和结束状态为旋转 360 度，即完整的一圈。

通过不断重复这个关键帧动画，可以实现一个持续旋转的动画效果。同时，可以根据需要使用不同的动画曲线和持续时间来调整动画的表现方式。最后我们在span元素中引入该动画即可，相关代码如下所示。

.loader span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    animation: animate 4s ease-in-out infinite;
    animation-delay: calc(0.2s * var(--i));
}

这段代码为span元素添加了样式。应用名为animate的关键帧动画到每个span元素上，持续时间为 4 秒，使用缓入缓出的动画曲线，并且无限循环播放。通过自定义CSS变量--i来设置每个span元素的动画延迟，其中--i可以表示为每颗珠子的转动顺序。

下面则就是关于如何实现珠子了。这里我们使用伪元素before来实现，相关代码如下。

.loader span::before{
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 30px #03a9f4;
    background: linear-gradient(#fce4ec,#03a9f4);
}

我们为span元素的伪元素::before添加了样式。

首先设置伪元素的内容为空，并将伪元素设置为绝对定位，使其相对于每个字母元素进行定位。

然后将伪元素相对于每个字母元素的顶部和左侧边缘定位，使用calc()函数来计算左侧定位值（使用宽度的一半减去 20px），这样可以使其居中显示。

最后设置伪元素的宽度和高度为 40px，将伪元素圆角设置为 50%，使其呈现为圆形。并通过线性渐变设置伪元素的背景，颜色从#fce4ec渐变到#03a9f4。

通过这些样式，每个span元素的伪元素::before将形成一个圆形的背景，并具有阴影效果和渐变背景色。这样就可以打造出一个“七珠合一”效果了。

总结

这个效果的实现过程就是以上这样了，整个过程比较简单，通俗易懂，感兴趣的朋友们可以亲自上手实践一下，或许还能在此效果上有所扩展，创造出不一样的效果，完整代码可以参考码上掘金。

avatar
文章
阅读
粉丝