如何用纯 CSS 创作一个极品飞车 loader 1
效果预览
在线演示
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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相关推荐
- 如何用纯 CSS 创作一个极品飞车 loader
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/w178191520/article/details/84861010 效果预览 在线演示 按下右侧的 ...
- 前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- 如何用纯 CSS 创作一个单元素抛盒子的 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKwXbx 可交互视频 ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个冒着热气的咖啡杯
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
最新文章
- 使用Valgrind的callgrind做c/c++代码的code profiling/性能调优
- GitHub图片无法显示
- 代码review,瑞出事来了!
- 东方终焉组引导页自适应html源码 视频背景炫酷
- micropython 蓝牙音箱_你愿意用ESPY-core做哪些有趣尝试?
- c# 通用类扩展方法 备注
- python plot 增加标记线_Python可视化| matplotlib04-掌握标记和线型的使用,一文,marker,linestyle...
- 图形推理1000题pdf_公务员考试:遇到图形推理题就烦恼?5招教你练成最强大脑...
- ActiveMQ 下载和安装
- python发短信sim800_sim800a发短信流程
- mysql关于xsd数据集的论述
- HDU 5745 La Vie en rose(简单模拟)
- 雷达信号处理-雷达应用
- Nolan最新版本2.4 Windows和docker安装升级教程, 登陆修复.排除个别需要实名的账号,nvjdc对接青龙面板教程
- Android Studio 4.2Previw版本编译错误提示Disable offline mode and rerun the build
- web端微信二维码自定义样式
- iPad----------教你如何查询ipad型号
- cocos creator制作游戏实战-Flak Cannon(二)
- 生产内存溢出定位分析
- MACD指标的数学意义解析
热门文章
- 将View的内容映射成Bitmap转图片导出
- A*算法与matlab实现
- matlabnbsp;sumsqr函数nbsp;求矩阵的平方和
- Tensorflow(二) —— 创建Tensor类型的数据
- 我的北航MEM之路 MEM备考经验分享
- 用LaTex代码写数学公式
- openGauss单节点一键安装脚本
- vue-router.js:2071 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to curre
- Gym 102576L Wizards Unite
- MPW/CyberShuttle芯片