如何用纯 CSS 创作炫酷的同心矩形旋转动画
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/bMvbRp
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cp2dZcQ
源代码下载
请从 github 下载。
代码解读
定义 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));
}
知识点
- border-color https://developer.mozilla.org/en-US/docs/Web/CSS/border-color
- calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc
- rotate() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate
- animation-delay https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
原文地址:https://segmentfault.com/a/1190000014807564
如何用纯 CSS 创作炫酷的同心矩形旋转动画的更多相关文章
- 前端每日实战:17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教程 此视频 ...
- 17.纯 CSS 创作炫酷的同心矩形旋转动画
原文地址:https://segmentfault.com/a/1190000014807564 感想: 这个特效不难,但是这想法可能想不到,哈哈,怎么又废了. HTML代码: <div cla ...
- 17.1拓展之纯 CSS 创作炫酷的同心圆旋转动画
效果地址:https://codepen.io/flyingliao/pen/ebjEMm?editors=1100 HTML代码: <div class="loader"& ...
- 如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 ...
- 前端每日实战:53# 视频演示如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 此视频是可 ...
- 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GYXvez 可交互视频 此视频是可 ...
- 前端每日实战:149# 视频演示如何用纯 CSS 创作一个宝路薄荷糖的动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oagrvz 可交互视频 此视频是可 ...
- 前端每日实战:52# 视频演示如何用纯 CSS 创作一个小球绕着圆环盘旋的动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gKxyWo 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作文本滑动特效的 UI 界面
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教 ...
随机推荐
- hdu 1573 X问题【扩展中国剩余定理】
扩展中国剩余定理的板子,合并完之后算一下范围内能取几个值即可(记得去掉0) #include<iostream> #include<cstdio> #include<cm ...
- 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)上,需要判断一下字符串相 ...
- C#XmlDocument输出字符串
XmlDocument xmlDoc = new XmlDocument(); //假定该xmlDoc已经有内容; MemoryStream streamXml = new MemoryStream( ...
- scikit-learning教程(二)统计学习科学数据处理的教程
统计学习:scikit学习中的设置和估计对象 数据集 Scikit学习处理来自以2D数组表示的一个或多个数据集的学习信息.它们可以被理解为多维观察的列表.我们说这些阵列的第一个轴是样本轴,而第二个轴是 ...
- Coloring Trees CodeForces - 711C
Coloring Trees CodeForces - 711C 题意:有n个点,每个点有一个c值,如果为0表示它没有被染色,否则表示它被染成了c值的颜色.颜色有1到m.把第i棵树染成颜色j所需要的代 ...
- 1049 - One Way Roads 观察 dfs
http://lightoj.com/volume_showproblem.php?problem=1049 题意是,在一副有向图中,要使得它变成一个首尾相连的图,需要的最小代价. 就是本来是1--& ...
- windows 7 正确禁用 IPv6
与Windows XP和Windows Server 2003不同的是,Windows Vista和Windows Server 2008中的IPv6无法被卸载.然而,在Windows Vista和W ...
- idea使用Git提交代码时忽略指定文件或文件夹
简述 使用idea编写代码并使用git作为版本控制器的时候,常常不需要提交配置文件以及一些其他不需要提交的文件,可以使用.ignore插件来在上传的时候忽略一些文件或文件夹. 安装 注意:安装完成之后 ...
- poj3262 Protecting the Flowers
思路: 简单贪心,每次选择性价比最高的. 实现: #include <iostream> #include <cstdio> #include <algorithm> ...
- 伟景行 citymaker 从入门到精通(1)——js开发,最基本demo,加载cep工程文件
开发环境:citymaker 7(以下简称cm),jquery,easyui 1.4(界面),visual studio 2012(没有vs,不部署到IIS也行,html文件在本地目录双击打开可用) ...