效果预览

在线演示

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

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的更多相关文章

  1. 前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 此视频是可 ...

  2. 如何用纯 CSS 创作一个荧光脉冲 loader 特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...

  3. 前端每日实战:11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...

  4. 前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交 ...

  5. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  6. 如何用纯 CSS 创作一个单元素抛盒子的 loader

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKwXbx 可交互视频 ...

  7. 前端每日实战:69# 视频演示如何用纯 CSS 创作一个单元素抛盒子的 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKwXbx 可交互视频 此视频是可 ...

  8. 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...

  9. 前端每日实战:146# 视频演示如何用纯 CSS 创作一个脉动 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/wYvGwr 可交互视频 此视频是可 ...

随机推荐

  1. npm、webpack、vue-cli 快速上手

    npm+webpack+vue-cli快速上手   Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome ...

  2. url、src与href属性的区别

    http://blog.csdn.net/rickgreen/article/details/54943500

  3. python HTTP 状态码

    404 Not Found 在HTTP请求的路径无法匹配任何RequestHandler类相对应的模式时返回404(Not Found)响应码. 400 Bad Request 如果你调用了一个没有默 ...

  4. 039 Combination Sum 组合总和

    给一组候选数字(C)(没有重复)并给一个目标数字(T),找出 C 中所有唯一的组合使得它们的和为 T.可以从 C 无限次数中选择相同的数字.说明:    所有数字(包括目标)都是正整数.    解集合 ...

  5. keil-rtx

    OS:任务级设计,任务间耦合小:改变裸机前后台设计方案中后台任务轮训无优先级重要任务得不到确定性响应:伪并行,提高利用率. 在keilv4.74最后一个版本之后,KIELV5将KEIL-RTX该为CM ...

  6. scut 125. 笔芯回文

    https://scut.online/p/125 看数据量,这题可能是O(n^2)的dp 也可能是区间dp,但是区间dp一般复杂度是O(n^3),虽然也可以优化,但是比赛的时候那么多人“秒”了,应该 ...

  7. 《java学习二》jvm性能优化-----认识jvm

    Java内存结构 Java堆(Java Heap) java堆是java虚拟机所管理的内存中最大的一块,是被所有线程共享的一块内存区域. 在虚拟机启动时创建.此内存区域的唯一目的就是存放对象实例,这一 ...

  8. 记录下这周的mysql调优工作

    这周一至周四基本都在做mysql的测试和调优工作,包括erlang端对mysql的写入测试,到今天为止暂且告一段落,下周先做下其他的开发.    测试环境    使用的测试环境是aliyun的杭州节点 ...

  9. Mind must be master of the body, strong mind can separate the body from its suffering.

    Mind must be master of the body, strong mind can separate the body from its suffering.意志是身体的主人,有顽强的意 ...

  10. null、undefined和NaN的区别

    未定义的值和定义未赋值的值是undefined: null是一种特殊的Object,可以给变量赋一个值null,来清除变量的值: NaN是一种特殊的number: