前端每日实战: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相关推荐
- 如何用纯 CSS 创作一个极品飞车 loader
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/w178191520/article/details/84861010 效果预览 在线演示 按下右侧的 ...
- 如何用纯 CSS 创作一个极品飞车 loader 1
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/w178191520/article/details/84861010 效果预览 在线演示 按下右侧的 ...
- 前端每日实战:119# 视频演示如何用纯 CSS 创作一个接扎啤的动画(内含2个视频)...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/rZeOQp 可交互视频 此视频是可 ...
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- html鼠标拖尾效果,前端每日实战:25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, s ...
- 前端每日实战:102# 视频演示如何用纯 CSS 创作一个小和尚
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMmYXp 可交互视频 此视频是可 ...
- 前端每日实战:125# 视频演示如何用纯 CSS 创作一个失落的人独自行走的动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MqpOdR/ 可交互视频 此视频是 ...
- 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GYXvez 可交互视频 此视频是可 ...
- python绘制图形沙漏_前端每日实战:118# 视频演示如何用纯 CSS 创作一个沙漏 loader...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, saf ...
最新文章
- mysql数据库验证登陆不上_MySQL数据库连接不上、密码修改问题
- 小知识点——DataTable把满足条件的一行放在第一行
- Qtcreator快速入门
- ui设计看的书_5本关于UI设计的书
- c linux 获取cpuid_Linux下C编程 -- 得到系统的CPU信息(cpuid)
- C++学习之路 | PTA乙级—— 1037 在霍格沃茨找零钱 (20 分)(精简)
- flash倒计时_11款免费又好用的PPT倒计时神器
- 【OpenCV】OpenCV函数精讲之 -- argc 和argv参数
- Antlr中文文档初稿2(《ANTLR树分析器》)
- 如何做WP的登录/注册功能
- 【西门子PLC S7-200smart与汇川变频器通过通讯控制】
- linux怎么从超级用户切换,linux怎么切换到超级用户
- 解决谷歌地图alert出现“此页面无法正确加载 Google 地图“
- 旧版的rust怎么老是掉线_RUST服务器进不去 RUST掉线用什么加速器解决?
- 深圳房价三连跌,国内的房地产价格或将持续下跌,该持现金过冬了
- 【上班摸鱼系列】文字选择类游戏:《职员默示录 - 启》末日丧尸爆发,你,是什么下场!?
- ps中扩展画布的时候,不能选择扩展画布部分的颜色解决方法
- 英语测试题库软件,英语考试app哪个好 英语考试题库app推荐_96u手游网
- java小游戏——飞翔的小鸟(java初学作品)
- LPC2294对片外EEPROM(24C04)进行读写操作,如何确定24C02EEPROM地址