前端每日实战:84# 视频演示如何用纯 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);
}
}
大功告成!
前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader的更多相关文章
- 前端每日实战:11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...
- 前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交 ...
- 如何用纯 CSS 创作一个极品飞车 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 ...
- 前端每日实战: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 可交互视频 此视频是可 ...
- 前端每日实战:119# 视频演示如何用纯 CSS 创作一个接扎啤的动画(内含2个视频)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/rZeOQp 可交互视频 此视频是可 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
- 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...
随机推荐
- LeetCode 144. Binary Tree Preorder Traversal 动态演示
先序遍历的非递归办法,还是要用到一个stack class Solution { public: vector<int> preorderTraversal(TreeNode* root) ...
- Django 安装、创建第一个项目
一.版本 Django 版本对应的 Python 版本: Django 版本 Python 版本 1.8 2.7, 3.2 , 3.3, 3.4, 3.5 1.9, 1.10 2.7, 3.4, ...
- 解决BootstrapTable设置height属性后,表格不对齐的问题
解决BootstrapTable设置height属性后,表格不对齐的问题 2018年03月06日 09:56:54 nb7474 阅读数 5920 一般在使用BootstrapTable 插件 ...
- dp(不连续和)
I - I HDU - 2845 Bean-eating is an interesting game, everyone owns an M*N matrix, which is fille ...
- Codeforces 1119C(思维)
题面 传送门 分析 这种题的重点是寻找不变量 我们发现如果改变4个角,则每一行和每一列的xor和不会改变(1^0=0^1) 所以只要算出异或和然后比较就可以 代码 #include<iostre ...
- qt 如何使用私有类?
在模块后面加上 -private 关键字,例如 widgets-private 然后 qmake 让配置文件运行一下. 在使用 QStackedLayout 布局并设置 QStackedLayout: ...
- Codeforces 208E. Blood Cousins
传送门 题目大意: 小C喜欢研究族谱,这一天小C拿到了一整张族谱. 小C先要定义一下k-祖先. x的1-祖先指的是x的父亲 x的k-祖先指的是x的(k-1)-祖先的父亲 小C接下来要定义k-兄弟 x的 ...
- 一个简单的winform程序调用webservices
本文原创,如需转载,请标明源地址,谢谢合作!http://blog.csdn.net/sue_1989/article/details/6597078 本文的编写IDE为VSTS2008和.NET F ...
- NGUI的窗体的推动和调节大小(drag object和drag resize object)
一,我们先添加一个sprite,给sprite添加一个背景图片,然后attach添加一个box Collider,但是这时我们右键attach是找不到drag object的我们需要在add comp ...
- C#编程--第一天
C#编程 一. 了解C#: 1. C#的定义及其特点 2.vs的集成开发环境:熟悉了解vs2012 二.C#语言基础 1.C#项目的组成结构: .config----配置文件(存放配置参数文件) .c ...