前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
2024-10-16 08:11:31
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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;
}
大功告成!
最新文章
- PX 和PT的区别
- 控制对话框风格的activity的显示大小与位置
- RabbitMQ入门教程——路由(Routing)
- 商业智能BI和ERP的融合之路
- css if hack之兼容ie
- 实现LoaderCallbacks接口动态循环加载网上图片并展示在手机屏幕上 ...
- 关于twitter的GIF变mp4的测试
- github上一些觉得对自己工作有用的项目收集
- Windows环境部署并调试pyspark(一)
- Flask 模板系统
- windows应用程序框架及实例
- MyEclipse破解步骤
- Java 之递归遍历目录
- Ajax中最有名axios插件(只应用于Ajax)(post方法,官网写错了,应是字符串格式)
- C++中前置声明介绍
- 在windows中:双击运行Python程序、后台运行Python程序
- 流媒体传输协议详解之---RTSP认证
- Sql 四大排名函数(ROW_NUMBER、RANK、DENSE_RANK、NTILE)
- JAVA 设计模式之原型模式
- 什么是Coded UI
热门文章
- 从Mybatis中#和$的区别到SQL预编译
- linux让命令或程序在终端后台运行的方法(Ubuntu/Fedora/Centos等一样适用)
- Linux驱动开发3——devfs udev procfs sysfs debugfs傻傻地分不清楚
- PANIC: Missing emulator engine program for ‘x86’ CPU.
- 测开之路一百零八:bootstrap表格
- struts2 基础2 类型转换器
- Linux-部署ftp
- Ecshop二次开发必备基础
- python+selenium的WebElement对象操作
- 16 (H5*) JS第6天 日期、字符串、数组