效果预览

在线演示

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

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. Angular2.0的学习(一)

    第一节课 1.Angular程序架构 2.搭建Angular开发环境 3.开发在线竞拍程序Auction的第一个版本

  2. 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 ...

  3. SSM Spring SpringMVC Mybatis框架整合Java配置完整版

    以前用着SSH都是老师给配好的,自己直接改就可以.但是公司主流还是SSM,就自己研究了一下Java版本的配置.网上大多是基于xnl的配置,但是越往后越新的项目都开始基于JavaConfig配置了,这也 ...

  4. spark 图文详解:资源调度和任务调度

    讲说spark的资源调度和任务调度,基本的spark术语,这里不再多说,懂的人都懂了... 按照数字顺序阅读,逐渐深入理解:以下所有截图均为个人上传,不知道为什么总是显示别人的QQ,好尴尬,无所谓啦, ...

  5. 洛谷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 ...

  6. JS将人民币小写金额转换为大写

    /** 数字金额大写转换(可以处理整数,小数,负数) */ function smalltoBIG(n) { var fraction = ['角', '分']; var digit = ['零', ...

  7. https的网站使用百度地图的问题

    https的网站使用百度地图,如果你引用的地址没写对的话,加载不出来百度地图,被认为是不安全的JS内容. 引用的地址:http://api.map.baidu.com/api?v=2.0&ak ...

  8. Each soul is individual and has its own merits and faults.

    Each soul is individual and has its own merits and faults. 每一个灵魂都是独特的,都有各自的美德和过错.<摆渡人>

  9. MapReduce的过程(2)

    MapReduce的编程思想(1) MapReduce的过程(2) 1. MapReduce从输入到输出 一个MapReduce的作业经过了input.map.combine.reduce.outpu ...

  10. npm使用快速的安装源(nrm)

    安装 npm install nrm --global 使用 nrm ls 切换安装源 nrm use taobao 测速 nrm test npm 参考地址:http://codingdict.co ...