06.纯函数-柯里化实现-组合函数详解

前言

具体的效果我们可以先来看一下，如图：

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

基础布局

通过上面这个动态图，我们大致就能想到基础的布局。其实很简单，通过 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 codeul {// ...other codeli {// ...other codeanimation: 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 相关的内容感兴趣，那就点点关注点点赞吧，让我们下期再见！

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享