如何用纯 CSS 创作一个精彩的彩虹 loading 特效
2024-09-05 13:30:24
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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
最新文章
- SharePoint 2013 开发教程
- 为什么我如此热爱这样一个比赛(转自vici)
- BZOJ 1096 仓库建设
- Linux下的tar压缩解压缩命令详解
- 《HTTP 权威指南》
- System.Threading.Timer使用心得
- Windows Myeclipse 10 安装 Perl 插件
- ANT的下载和安装
- struts1、ajax、jquery、json简单实例
- 002.AngularJs调用Restful实现CRUD
- Java NIO框架Netty教程(一) – Hello Netty
- 16. Linux 文件目录权限
- python成长之路9——socket和socketserver
- HTML 相同name 传递一个数组
- HDU-1995-汉诺塔V
- SHA安全散列算法简析
- Python基础-入门之路PYTHON-包 相对导入&;绝对导入
- python抢火车票 短信通知
- CentOS防火墙配置
- 一个比较变态的js传值,Query的bind、ajax闭包、上下文传值
热门文章
- thinkphp is NULL表达式写法
- 【知识库】-数据库_MySQL之基本数据查询:子查询、分组查询、模糊查询
- 「CTSC 2008」祭祀
- eureka 服务实例实现快速下线快速感知快速刷新配置解析
- 如何使用python将指定文件里的数据读取到字典里
- Java编写能完成复数运算的程序
- IDEA离线更新
- 进程,虚拟环境,Mysql主从
- java:ssh连接服务器,实现本地文件上传和下载
- java.sql.SQLException: The server time zone value &#39;&#214;&#208;&#185;&#250;&#177;&#234;&#215;&#188;&#202;&#177;&#188;&#228;&#39; is unrecognized or represents...