如何用纯 CSS 创作一个极品飞车 loader
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/MBbEMo
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cWLg8hV
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 7 个元素:
<div class="loader">
<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: linear-gradient(midnightblue, black);
}
画出 7 个方块:
.loader {
width: calc(1em * 7 + 0.15em * 6);
height: 1.5em;
font-size: 20px;
display: flex;
justify-content: space-between;
}
.loader span {
width: 1em;
background-color: deepskyblue;
border-radius: 0.1em;
}
让方块倾斜:
.loader span {
transform: skewX(-25deg);
}
定义闪烁的动画效果:
.loader span {
animation: animate 0.8s infinite alternate;
filter: opacity(0);
}
@keyframes animate {
to {
filter: opacity(1);
}
}
定义变量,设置动画延时,使效果看起来像是有一个暗色块从左到右移动:
.loader span {
animation-delay: calc((var(--n) - 1) * 0.2s);
}
.loader span:nth-child(1) {
--n: 1;
}
.loader span:nth-child(2) {
--n: 2;
}
.loader span:nth-child(3) {
--n: 3;
}
.loader span:nth-child(4) {
--n: 4;
}
.loader span:nth-child(5) {
--n: 5;
}
.loader span:nth-child(6) {
--n: 6;
}
.loader span:nth-child(7) {
--n: 7;
}
最后,增加色块的缩放效果:
.loader span {
transform: skewX(-25deg) scale(0.1);
}
@keyframes animate {
to {
filter: opacity(1);
transform: skewX(-25deg) scale(1);
}
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015700996
如何用纯 CSS 创作一个极品飞车 loader的更多相关文章
- 前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 前端每日实战:11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...
- 前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交 ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 如何用纯 CSS 创作一个单元素抛盒子的 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKwXbx 可交互视频 ...
- 前端每日实战:69# 视频演示如何用纯 CSS 创作一个单元素抛盒子的 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKwXbx 可交互视频 此视频是可 ...
- 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...
- 前端每日实战:146# 视频演示如何用纯 CSS 创作一个脉动 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/wYvGwr 可交互视频 此视频是可 ...
随机推荐
- Angular2.0的学习(一)
第一节课 1.Angular程序架构 2.搭建Angular开发环境 3.开发在线竞拍程序Auction的第一个版本
- HDU 1027 G - Can you answer these queries?
http://acm.hdu.edu.cn/showproblem.php?pid=4027 Can you answer these queries? Time Limit: 4000/2000 M ...
- SSM Spring SpringMVC Mybatis框架整合Java配置完整版
以前用着SSH都是老师给配好的,自己直接改就可以.但是公司主流还是SSM,就自己研究了一下Java版本的配置.网上大多是基于xnl的配置,但是越往后越新的项目都开始基于JavaConfig配置了,这也 ...
- spark 图文详解:资源调度和任务调度
讲说spark的资源调度和任务调度,基本的spark术语,这里不再多说,懂的人都懂了... 按照数字顺序阅读,逐渐深入理解:以下所有截图均为个人上传,不知道为什么总是显示别人的QQ,好尴尬,无所谓啦, ...
- 洛谷P1057 传球游戏
f[i][j]表示第i轮j拿到球的方案数 转移:f[i][j]=f[i-1][j+1] +f[i-1][j+-1].注意: 边界f[0][1]=1; 还有当j=1或N时 #include<ios ...
- JS将人民币小写金额转换为大写
/** 数字金额大写转换(可以处理整数,小数,负数) */ function smalltoBIG(n) { var fraction = ['角', '分']; var digit = ['零', ...
- https的网站使用百度地图的问题
https的网站使用百度地图,如果你引用的地址没写对的话,加载不出来百度地图,被认为是不安全的JS内容. 引用的地址:http://api.map.baidu.com/api?v=2.0&ak ...
- Each soul is individual and has its own merits and faults.
Each soul is individual and has its own merits and faults. 每一个灵魂都是独特的,都有各自的美德和过错.<摆渡人>
- MapReduce的过程(2)
MapReduce的编程思想(1) MapReduce的过程(2) 1. MapReduce从输入到输出 一个MapReduce的作业经过了input.map.combine.reduce.outpu ...
- npm使用快速的安装源(nrm)
安装 npm install nrm --global 使用 nrm ls 切换安装源 nrm use taobao 测速 nrm test npm 参考地址:http://codingdict.co ...