如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/vjvoow
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cPLGLhV
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom:
<div class="rainbow">
<div class="bows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
居中显示:
html, body, .bows {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: black;
}
定义彩虹的尺寸:
.rainbow {
width: 20em;
height: 10em;
}
定义彩虹内拱形的尺寸:
.bows {
width: 100%;
height: 200%;
position: relative;
}
定义彩虹内所有拱形共有的特性:
.bows {
transform: rotate(225deg);
}
.bows span {
position: absolute;
width: calc(100% - 2em * (var(--n) - 1));
height: calc(100% - 2em * (var(--n) - 1));
border: 1em solid var(--color);
box-sizing: border-box;
border-top-color: transparent;
border-left-color: transparent;
border-radius: 50%;
}
分别设置每个拱形的个性变量:
.bows span:nth-child(1) {
--n: 1;
--color: orangered;
}
.bows span:nth-child(2) {
--n: 2;
--color: orange;
}
.bows span:nth-child(3) {
--n: 3;
--color: yellow;
}
.bows span:nth-child(4) {
--n: 4;
--color: mediumspringgreen;
}
.bows span:nth-child(5) {
--n: 5;
--color: deepskyblue;
}
.bows span:nth-child(6) {
--n: 6;
--color: mediumpurple;
}
定义动画效果:
.bows span {
animation: rotating 3s infinite;
animation-delay: calc(0.05s * var(--n));
}
@keyframes rotating {
0%, 20% {
transform: rotate(0deg);
}
80%, 100% {
transform: rotate(360deg);
}
}
最后,隐藏掉容器之外的内容:
.rainbow {
overflow: hidden;
}
大功告成!
原文地址:https://segmentfault.com/a/1190000014939781
如何用纯 CSS 创作一个精彩的彩虹 loading 特效的更多相关文章
- 前端每日实战:27# 视频演示如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教程 此视频 ...
- 27.纯 CSS 创作一个精彩的彩虹 loading 特效
原文地址:https://segmentfault.com/a/1190000014939781 感想:正方形->圆->旋转一定角度->动画->隐藏下一半 HTML代码: &l ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 如何用纯 CSS 创作一个容器厚条纹边框特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/YLqbXy 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个菜单反色填充特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 ...
- 前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...
- 前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以 ...
- 前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视频是可以交 ...
随机推荐
- docker启动、关闭、重启命令
docker启动命令,docker重启命令,docker关闭命令 启动 systemctl start docker守护进程重启 sudo systemctl daemon-relo ...
- Centos 7.6 安装Mysql5.7(离线)
Centos 7.6 安装Mysql5.7(离线) 标签(空格分隔): mysql 安装包下载 https://dev.mysql.com/downloads/mysql/ [image.png-14 ...
- 修改jupyter notebook的字体等样式
方法一 /lib/site-packages/notebook/static/custom/ 里面有个custom.css文件,你只要修改这个文件就可以了. /* jupyter notebook中显 ...
- C++入门经典-例9.1-函数模板,函数模板的作用,使用数组作为模板参数
1:函数模板不是一个实在的函数,因此编译器不能为其生成可执行的代码.定义函数模板只是一个对函数功能框架的描述,在具体执行时,将根据传递的实际参数决定其功能. 2:函数模板定义的一般形式如下: temp ...
- oc 基本语法 类 静态变量 常量
// // ReViewClass.h // hellowWorld // 本类是oc复习练手类 // Created by hongtao on 2018/3/26. // Copyright © ...
- ftp配置文件详解
### 主配置文件(/etc/vsftpd/vsftpd.conf) 严格来说,整个 vsftpd 的配置文件就只有这个档案!这个档案的设定是以 bash的变量设定相同的方式来处理的, 也就是`参数= ...
- 解决JxBrowser中BrowserView控件覆盖其他控件的办法
https://blog.csdn.net/w815878564/article/details/79699559 JxBrowser是一个基于chromium的Java浏览器组件,同时支持Swing ...
- python 学习笔记(三)根据字典中值的大小对字典中的项排序
字典的元素是成键值对出现的,直接对字典使用sorted() 排序,它是根据字典的键的ASCII编码顺序进行排序,要想让字典根据值的大小来排序,可以有两种方法来实现: 一.利用zip函数将字典数据转化为 ...
- JSON+如何处理JSON字符串
JSON(Javascript Object Notation)是一种轻量级的数据交换语言,以文字为基础,且易于让人阅读.尽管JSON是在Javascript的一个子集,但JSON是独立于语言的文本格 ...
- java最常见的5个错误
1. Null 的过度使用 避免过度使用 null 值是一个最佳实践.例如,更好的做法是让方法返回空的 array 或者 collection 而不是 null 值,因为这样可以防止程序抛出 Null ...