如何用纯 CSS 创作一个菱形 loader 动画
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/eKzjqK
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/c8eyJUE
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,一个容器中包含 9 个子元素:
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
居中显示:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
定义容器和子元素尺寸,是一个大正方形里包含 9 个小正方形:
.loader {
width: 10em;
height: 10em;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.5em;
}
把图案调整为大菱形中包含 9 个小菱形:
.loader {
transform: rotate(45deg);
}
以竖向的小菱形为单位,为小菱形块上色:
.loader span {
background-color: var(--c);
}
.loader span:nth-child(7) {
--c: tomato;
}
.loader span:nth-child(4),
.loader span:nth-child(8) {
--c: gold;
}
.loader span:nth-child(1),
.loader span:nth-child(5),
.loader span:nth-child(9) {
--c: limegreen;
}
.loader span:nth-child(2),
.loader span:nth-child(6) {
--c: dodgerblue;
}
.loader span:nth-child(3) {
--c: mediumpurple;
}
定义动画效果:
.loader span {
animation: blinking 2s linear infinite;
animation-delay: var(--d);
transform: scale(0);
}
@keyframes blinking {
0%, 100% {
transform: scale(0);
}
40%, 80% {
transform: scale(1);
}
}
最后,为小菱形设置时延,增强动感:
.loader span:nth-child(7) {
--d: 0s;
}
.loader span:nth-child(4),
.loader span:nth-child(8) {
--d: 0.2s;
}
.loader span:nth-child(1),
.loader span:nth-child(5),
.loader span:nth-child(9) {
--d: 0.4s;
}
.loader span:nth-child(2),
.loader span:nth-child(6) {
--d: 0.6s;
}
.loader span:nth-child(3) {
--d: 0.8s;
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015208027
如何用纯 CSS 创作一个菱形 loader 动画的更多相关文章
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 45.纯 CSS 创作一个菱形 loader 动画
原文地址:https://segmentfault.com/a/1190000015208027#articleHeader3 感想: 网格布局-> display: grid; HTML co ...
- 如何用纯 CSS 创作一个均衡器 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oybWBy 可交互视频教 ...
- 前端每日实战:42# 视频演示如何用纯 CSS 创作一个均衡器 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oybWBy 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作一个充电 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deNqdV 可交互视频教程 此视 ...
- 前端每日实战:146# 视频演示如何用纯 CSS 创作一个脉动 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/wYvGwr 可交互视频 此视频是可 ...
- 前端每日实战:113# 视频演示如何用纯 CSS 创作一个赛车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGdXGJ 可交互视频 此视频是可 ...
- 前端每日实战:8# 视频演示如何用纯 CSS 创作一个充电 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deNqdV 可交互视频教程 此视频是可以交 ...
- 如何用纯 CSS 创作一个摇摇晃晃的 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/oyJvpe 可交互视频 此 ...
随机推荐
- DRF教程1-序列化
序列化类 要建立web API,要做的第一件事就是对实例进行序列化,比如以json方式显示.我们可以生命序列化,它和django的forms很相似.在app目录下创建serializers.py fr ...
- siege官方文档(译)(一)
WHAT IS siege? Siege is an open source regression test and benchmark utility. Siege是一款开源回归测试和基准测试工具. ...
- 19 标签:xml或者html
1 标签:xml或者html 1.1 使用XmlSlurper解析xml groovy处理xml非常容易.XmlSlurper 类用来处理xml.在处理xml方面,还有其他的处理方式,但 ...
- 使用 MiniProfiler 来分析 ASP.NET Core 应用
MiniProfiler(https://miniprofiler.com/)是一个轻量级且简单易用的分析工具库,它可以用来分析ASP.NET Core应用. 优点 针对ASP.NET Core MV ...
- E. 打击判定 判断矩形是否相交
有一个很明显的做法就是判断PointInPolygon .枚举第二个矩形的点,是否在第一个矩形内,但是有bug 就是那种第二个矩形很大的那种,所以容易想到又枚举第一个矩形的点,看是否在第二个矩形里. ...
- 18002 Z-Scan 模拟题
18002 Z-Scan 时间限制:1000MS 内存限制:65535K提交次数:0 通过次数:0 题型: 编程题 语言: 不限定 Description Z-Scan is a method ...
- 如何理解linux多用户多任务
Linux 的单用户.多任务: 容易理解. Linux 的多用户.多任务 举个例子,比如LinuxSir.Org 服务器,上面有FTP 用户.系统管理员.web 用户.常规普通用户等.在同一时刻,比如 ...
- 谈PHP中的钩子
钩子,英文为hooks.在程序中应用相当广泛,但是究竟什么是钩子呢?本人介绍一下目前本人对钩子的理解和相关心得. 假如有这么一段程序流: function fun(){ funA(); funB(); ...
- mongodb 文本索引
启用文本搜索: 最初文本搜索是一个实验性功能,但2.6版本开始,配置是默认启用的.但是,如果使用的是以前 MongoDB 的版本,那么必须启用文本搜索,使用下面的代码: >db.adminCom ...
- mongodb sort
sort() 方法 要在 MongoDB 中的文档进行排序,需要使用sort()方法. sort() 方法接受一个文档,其中包含的字段列表连同他们的排序顺序.要指定排序顺序1和-1. 1用于升序排列, ...