效果预览

在线演示

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/bMvbRp

可交互视频教程

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cp2dZcQ

源代码下载

本地下载

请从 github 下载。

https://github.com/comehope/front-end-daily-challenges/tree/master/017-swapping-colors-loader-animation

代码解读

定义 dom,一个容器中包含一个 span:

<div class="loader">
<span></span>
</div>

居中显示:

html,
body,
.loader {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}

设置 span 的样式:

.loader {
width: 10em;
height: 10em;
font-size: 28px;
position: relative;
} .loader span {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(100%, 0%, 0%, 0.3);
box-sizing: border-box;
border: 0.5em solid;
border-color: white rgba(100%, 100%, 100%, 0.2);
}

在 dom 中把 span 增加到 5 个:

<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

分别设置 5 个 span 的尺寸:

.loader span:nth-child(1) {
width: calc(20% + 20% * (5 - 1));
height: calc(20% + 20% * (5 - 1));
} .loader span:nth-child(2) {
width: calc(20% + 20% * (5 - 2));
height: calc(20% + 20% * (5 - 2));
} .loader span:nth-child(3) {
width: calc(20% + 20% * (5 - 3));
height: calc(20% + 20% * (5 - 3));
} .loader span:nth-child(4) {
width: calc(20% + 20% * (5 - 4));
height: calc(20% + 20% * (5 - 4));
} .loader span:nth-child(5) {
width: calc(20% + 20% * (5 - 5));
height: calc(20% + 20% * (5 - 5));
}

增加颜色变幻的动画效果:

.loader span {
animation: animate 5s ease-in-out infinite alternate;
} @keyframes animate {
0% {
/* red */
background-color: rgba(100%, 0%, 0%, 0.3);
} 25% {
/* yellow */
background-color: rgba(100%, 100%, 0%, 0.3);
} 50% {
/* green */
background-color: rgba(0%, 100%, 0%, 0.3);
} 75% {
/* blue */
background-color: rgba(0%, 0%, 100%, 0.3);
} 100% {
/* purple */
background-color: rgba(100%, 0%, 100%, 0.3);
}
}

再增加旋转效果:

@keyframes animate {
0% {
transform: rotate(0deg);
} 100% {
transform: rotate(720deg);
}
}

最后,为每个 span 设置动画延时,增加动感:

.loader span:nth-child(1) {
animation-delay: calc(0.2s * (5 - 1));
} .loader span:nth-child(2) {
animation-delay: calc(0.2s * (5 - 2));
} .loader span:nth-child(3) {
animation-delay: calc(0.2s * (5 - 3));
} .loader span:nth-child(4) {
animation-delay: calc(0.2s * (5 - 4));
} .loader span:nth-child(5) {
animation-delay: calc(0.2s * (5 - 5));
}

知识点

原文地址:https://segmentfault.com/a/1190000014807564

如何用纯 CSS 创作炫酷的同心矩形旋转动画的更多相关文章

  1. 前端每日实战:17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教程 此视频 ...

  2. 17.纯 CSS 创作炫酷的同心矩形旋转动画

    原文地址:https://segmentfault.com/a/1190000014807564 感想: 这个特效不难,但是这想法可能想不到,哈哈,怎么又废了. HTML代码: <div cla ...

  3. 17.1拓展之纯 CSS 创作炫酷的同心圆旋转动画

    效果地址:https://codepen.io/flyingliao/pen/ebjEMm?editors=1100 HTML代码: <div class="loader"& ...

  4. 如何用纯 CSS 创作一个文本淡入淡出的 loader 动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 ...

  5. 前端每日实战:53# 视频演示如何用纯 CSS 创作一个文本淡入淡出的 loader 动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 此视频是可 ...

  6. 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GYXvez 可交互视频 此视频是可 ...

  7. 前端每日实战:149# 视频演示如何用纯 CSS 创作一个宝路薄荷糖的动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oagrvz 可交互视频 此视频是可 ...

  8. 前端每日实战:52# 视频演示如何用纯 CSS 创作一个小球绕着圆环盘旋的动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gKxyWo 可交互视频 此视频是可 ...

  9. 如何用纯 CSS 创作文本滑动特效的 UI 界面

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教 ...

随机推荐

  1. hdu 1573 X问题【扩展中国剩余定理】

    扩展中国剩余定理的板子,合并完之后算一下范围内能取几个值即可(记得去掉0) #include<iostream> #include<cstdio> #include<cm ...

  2. bzoj 1090: [SCOI2003]字符串折叠【区间dp】

    设f[i][j]为区间(i,j)的最短长度,然后转移的话一个是f[i][j]=min(j-i+1,f[i][k]+f[k+1][j]),还有就是把(k+1,j)合并到(i,k)上,需要判断一下字符串相 ...

  3. C#XmlDocument输出字符串

    XmlDocument xmlDoc = new XmlDocument(); //假定该xmlDoc已经有内容; MemoryStream streamXml = new MemoryStream( ...

  4. scikit-learning教程(二)统计学习科学数据处理的教程

    统计学习:scikit学习中的设置和估计对象 数据集 Scikit学习处理来自以2D数组表示的一个或多个数据集的学习信息.它们可以被理解为多维观察的列表.我们说这些阵列的第一个轴是样本轴,而第二个轴是 ...

  5. Coloring Trees CodeForces - 711C

    Coloring Trees CodeForces - 711C 题意:有n个点,每个点有一个c值,如果为0表示它没有被染色,否则表示它被染成了c值的颜色.颜色有1到m.把第i棵树染成颜色j所需要的代 ...

  6. 1049 - One Way Roads 观察 dfs

    http://lightoj.com/volume_showproblem.php?problem=1049 题意是,在一副有向图中,要使得它变成一个首尾相连的图,需要的最小代价. 就是本来是1--& ...

  7. windows 7 正确禁用 IPv6

    与Windows XP和Windows Server 2003不同的是,Windows Vista和Windows Server 2008中的IPv6无法被卸载.然而,在Windows Vista和W ...

  8. idea使用Git提交代码时忽略指定文件或文件夹

    简述 使用idea编写代码并使用git作为版本控制器的时候,常常不需要提交配置文件以及一些其他不需要提交的文件,可以使用.ignore插件来在上传的时候忽略一些文件或文件夹. 安装 注意:安装完成之后 ...

  9. poj3262 Protecting the Flowers

    思路: 简单贪心,每次选择性价比最高的. 实现: #include <iostream> #include <cstdio> #include <algorithm> ...

  10. 伟景行 citymaker 从入门到精通(1)——js开发,最基本demo,加载cep工程文件

    开发环境:citymaker 7(以下简称cm),jquery,easyui 1.4(界面),visual studio 2012(没有vs,不部署到IIS也行,html文件在本地目录双击打开可用) ...