45.纯 CSS 创作一个菱形 loader 动画
原文地址:https://segmentfault.com/a/1190000015208027#articleHeader3
感想: 网格布局-》 display: grid;
HTML code:
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS code:
html, body {
margin:;
padding:;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
.loader{
width: 10em;
height: 10em;
/* 网格布局 */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.5em;
/* 旋转 : 45度 */
transform: rotate(45deg);
} /* 以竖向的小菱形为单位,为小菱形涂颜色 */
.loader span{
background-color: var(--c);
animation: blinking 2s linear var(--d) infinite;
/* animation-delay: var(--d); */
transform: scale(0);
}
/* blinking : 闪烁 */
@keyframes blinking{
0%,100%{
transform: scale(0);
}
40%,80%{
transform: scale(1);
}
}
.loader span:nth-child(7) {
--c: tomato;
--d: 0s;
} .loader span:nth-child(4),
.loader span:nth-child(8) {
--c: gold;
--d: 0.2s;
}
.loader span:nth-child(1),
.loader span:nth-child(5),
.loader span:nth-child(9) {
--c: limegreen;
--d: 0.4s;
}
.loader span:nth-child(2),
.loader span:nth-child(6) {
--c: dodgerblue;
--d: 0.6s;
}
.loader span:nth-child(3) {
--c: mediumpurple;
--d: 0.8s;
}
45.纯 CSS 创作一个菱形 loader 动画的更多相关文章
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作一个菱形 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教 ...
- 42.纯 CSS 创作一个均衡器 loader 动画
原文地址: https://segmentfault.com/a/1190000015157160 感想: 不难,最简单的动画.拓展地址: https://scrimba.com/c/cWqVv9hd ...
- 如何用纯 CSS 创作一个均衡器 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oybWBy 可交互视频教 ...
- 前端每日实战:42# 视频演示如何用纯 CSS 创作一个均衡器 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oybWBy 可交互视频教程 此视频 ...
- 前端每日实战:146# 视频演示如何用纯 CSS 创作一个脉动 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/wYvGwr 可交互视频 此视频是可 ...
- 前端每日实战:113# 视频演示如何用纯 CSS 创作一个赛车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGdXGJ 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一个充电 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deNqdV 可交互视频教程 此视 ...
- 前端每日实战:8# 视频演示如何用纯 CSS 创作一个充电 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deNqdV 可交互视频教程 此视频是可以交 ...
随机推荐
- mac打开文件提示文件已经坏了的修改
10.12下面,mac做了安全的限制,不能打开任意的文件,需要解除限制 sudo spctl --master-disable
- 跟着未名学Office - 高效笔记OneNote
了解OneNote 2016年12月22日 19:57 OneNote Summary 理解OneNote中的笔记本.分区.页的概念 编写人:未名 感谢秦大: http://www.zloffi ...
- ToString()、Convert.ToString()、(string)、as string 的区别
通常 object 到 string 有四种方式(假设有object obj):obj.ToString().Convert.ToString().(string)obj.obj as string. ...
- 宝塔linux面板运行jsp文件的配置工作
第一步宝塔安装和软件安装我们先安装宝塔面板(这个不需要我说咋弄吧) 安装完成后登录到宝塔面板然后安装软件我个人喜欢nginx最新版,mysql由于服务器配置很菜所以没发装56,php什么的我用不到就没 ...
- Zuul Read Time out 错误
只改application.yml文件即可: eureka: client: serviceUrl: defaultZone: http://localhost:7087/eureka/ server ...
- Linux CentOS 下关闭防火墙
永久关闭(重启后生效) 开启: chkconfig iptables on 关闭: chkconfig iptables off 临时关闭(重启后失效) 开启: service iptables st ...
- Java学习——使用Static修饰符
程序功能:通过两个类 StaticDemo.LX4_1 说明静态变量/方法与实例变量/方法的区别. package Pack1; public class Try { public static vo ...
- 继续循环continue
继续循环continue continue的作用是仅仅跳过本次循环,而整个循环体继续执行. 语句结构: for(初始条件;判断条件;循环后条件值更新) { if(特殊情况) { continue; } ...
- Java-Runoob-高级教程-实例-方法:02. Java 实例 – 输出数组元素
ylbtech-Java-Runoob-高级教程-实例-方法:02. Java 实例 – 输出数组元素 1.返回顶部 1. Java 实例 - 输出数组元素 Java 实例 以下实例演示了如何通过重 ...
- MySQL binlog 组提交与 XA(两阶段提交)--1
参考了网上几篇比较靠谱的文章 http://www.linuxidc.com/Linux/2015-11/124942.htm http://blog.csdn.net/woqutechteam/ar ...