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

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

在前面的内容中，我们通过 CSS3 的 transform 属性实现了一个有趣的 3D Menu 菜单效果，刚好最近又学到了一个新的纯 CSS 实现的 彩虹效果，今天就来给大家分享一下。具体的效果我们可以先来看一下，如图：

初次看到这个效果的时候觉得特别惊艳😻，多看几次依旧觉得很惊艳，下面我们就来一起学习一下如何制作一个这样炫酷的彩虹吧😝！

基础布局

通过上面这个动态图，我们大致就能想到基础的布局。其实很简单，通过 p 标签或者 li 标签都是可以的，这里我选择使用 li 标签来实现这七彩虹的七个圆环，具体的 html 代码如下：

<div class="center">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

上面的布局很简单吧，只需要添加七个 li 标签并配合相关的 CSS 代码，就能画出七色的彩虹来。下面我们一起来看一下相关的样式。

画出七彩虹

我们已经添加了基本的布局，接下面我们就需要在 html 的布局上通过 CSS 来添加相关的样式了。在前面的文章中介绍过，html、css、js 是三剑客~~(基佬)~~，因此要完成一些特殊的特效是离不开它们三个的，而这里因为这个动效不涉及到与用户的交互，因此我们只需要 html 和 css，js 这次就暂时用不到了，我们先来看一下相关的 less 代码，如下：

* {
    margin: 0;
    padding: 0;
}
.center {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);

    ul {
        position: relative;
        width: 500px;
        height: 320px;
        overflow: hidden;
        border-bottom: 1px solid rgba(0, 0, 0, .2);

        li {
            list-style: none;
            border-radius: 50%;
            border: 20px solid #000;
            position: absolute;
            top: 100%;
            left: 50%;
            border-bottom-color: transparent !important;
            border-left-color: transparent !important;
            box-shadow: 0 0 10px rgba(0, 0, 0, .5);
            transform: translate(-50%, -50%);

            &:nth-child(1) {
                width: 80px;
                height: 80px;
                border-color: #f00;
            }

            &:nth-child(2) {
                width: 120px;
                height: 120px;
                border-color: #f00;
            }

            &:nth-child(3) {
                width: 160px;
                height: 160px;
                border-color: #f00;
            }

            &:nth-child(4) {
                width: 200px;
                height: 200px;
                border-color: #f00;
            }

            &:nth-child(5) {
                width: 240px;
                height: 240px;
                border-color: #f00;
            }

            &:nth-child(6) {
                width: 280px;
                height: 280px;
                border-color: #f00;
            }

            &:nth-child(7) {
                width: 320px;
                height: 320px;
                border-color: #f00;
            }
        }
    }
}

在上面的 less 代码中，通过设置 li 的 border 属性，渲染了一个 20px 的边框，然后设置 border 左侧和底部的颜色为透明色，并将 border-radius 设置为 50%，这样就形成了一个半圆，最后我们在给每一个 li 单独添加相关的宽度和高度，以及设置 border 的颜色，最终得到一个静态的半圆图，如下所示：

因为我们还没有添加动画效果，因此现在还是一个纯静态的半圆图，接下来我们需要设置七彩虹的七色了，那么这七色从哪获取呢？可以点击这里进行查看，相关内容如图所示：

接着我们只需要按照上面的七种颜色将前面七个 li 的边框颜色修改一下，最终就能得到如下效果：

到目前为止，我们的七彩虹已经画出来了，但是它还是纯静态的，接下来我们就要让它动起来。我们都知道在 CSS3 中新增了一个 animation 动画属性，我们只需要通过 @keyfroms 关键词就可以定义相关的动画，然后使用 animation 来执行即可，相关的代码如下所示：

// ...other code

.center {
    // ...other code
    
    ul {
        // ...other code
        
        li {
            // ...other code
            animation: animate 5s infinite alternate;
        }
    }
}


@keyframes animate {
    0% {
            transform: translate(-50%, -50%) rotate(-45deg);
    }
    100% {
            transform: translate(-50%, -50%) rotate(315deg);
    }
}

我们只需要在 li 中添加 animation 属性，并调用 animate 动画，就能看到所有的半圆都动起来了，如下图所示：

虽然七彩虹已经动起来了，但是这七个环都是一起在动，效果不好，我们需要借助 animation 上的另一个属性 animation-delay，它主要用于延迟执行动画，我们给每个 li 都单独设置一个延迟执行时间，最终的执行效果这里可以进行查看

最后

我们通过这个欢乐彩虹的效果，学习了 CSS3 中的 animation 属性，并通过 animation-delay 来延迟动画的执行时间，当然 animation 属性中的值还有很多，在后续的例子中会用到更多，如果你也对 CSS3 相关的内容感兴趣，那就点点关注点点赞吧，让我们下期再见！

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

往期回顾

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

这么炫酷的 3D Menu 效果，真的不来看看？

产品经理：你这个效果不行，我想要一个五彩斑斓的黑！我：。。。

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

前言

基础布局

画出七彩虹

最后

往期回顾

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