如何用纯 CSS 创作一组昂首阔步的圆点
效果预览
在线演示
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/ejrMKe
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/caw7yTv
源代码下载
本地下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 5 个元素,每个元素代表 1 个小球:
<div class="loader"><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: radial-gradient(circle at center, sienna, maroon);
}
定义容器尺寸:
.loader {width: 6em;height: 1em;font-size: 40px;
}
画出圆点:
.loader {position: relative;
}.loader span {position: absolute;width: 1em;height: 1em;background-color: white;border-radius: 50%;left: 5em;
}
定义小球从右到左移动以及从左侧返回到右侧的动画效果:
.loader {--duration: 5s;
}.loader span {animation: walk linear infinite;animation-duration: var(--duration);
}@keyframes walk {0%, 95%, 100% {left: 5em;}80%, 85% {left: 0;}
}
再增加小球在最左端向上跳起和在最右端向下落下的动画效果:
.loader span {animation: walk linear infinite,jump linear infinite;
}@keyframes jump {80%, 100% {top: 0;}85%, 95% {top: -1em;}
}
再增加小球在从左侧返回到右侧时,因运动得快而稍被压扁的效果:
.loader span {animation: walk linear infinite,jump linear infinite,squash linear infinite;
}@keyframes squash {80%, 100% {width: 1em;height: 1em;}90% {width: 2em;height: 0.8em;}
}
为 5 个小球分别定义变量:
.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 {--dots: 5;
}
设置动画延时:
.loader span {animation-delay: calc(var(--n) * var(--duration) / var(--dots) * -1);
}
最后,把点的尺寸改小一些:
.loader {font-size: 20px;
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015868445
如何用纯 CSS 创作一组昂首阔步的圆点相关推荐
- 如何用纯 CSS 创作一组昂首阔步的圆点 1
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejrMKe 可交互视频 ...
- 前端每日实战:97# 视频演示如何用纯 CSS 创作一组昂首阔步的圆点
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejrMKe 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 前端每日实战:60# 视频演示如何用纯 CSS 创作一块乐高积木
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKKqrv 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个冒着热气的咖啡杯
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...
- 如何用纯 CSS 创作背景色块变换的按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XYKdwg 可交互视频教 ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
最新文章
- Linux监控平台介绍、zabbix监控介绍、安装zabbix、忘记Admin密码如何做
- html-webpack-plugin插件 根据模板生成多页面
- 计算机应用基础本科常见问题讨论,《计算机应用基础》(本科)2017年6月期末考试指导.pdf...
- 内存结构 堆 栈 全局区 常量区 代码区
- python url拼接_详解Python urlencode编码和url拼接方法
- bbb 烧写脚本分析
- -bash: lsof: 未找到命令
- Python之subprocess模块
- 3.2存储器层次结构
- 月份对比_行业洞察 | 10月份行业概览amp;头部广告主盘点
- 【前端 · 面试 】HTTP 总结(八)—— HTTP 强缓存
- vue-13-swiper组件的使用
- 怎么修改asp文件上传大小限制?
- 【深度长文】中国电子商务简史:1999-2019
- arduino并口屏_Arduino教程 12864绘图功能库的使用(并口通信,仅适用ST7920)
- Exploit开发系列教程-Windows基础shellcode
- 中国智能POS终端行业市场供需与战略研究报告
- windows无法访问指定设备路径或文件
- HTML5期末大作业:南京旅游网站设计——六朝古都-南京旅游(10页) HTML+CSS+JavaScript 出游旅游主题度假酒店 计划出行网站设计
- CentOS6开启BBR加速
热门文章
- HOJ——T 1867 经理的烦恼
- HTML5.1 推荐中 1.5.3. Extensibility 段落翻译
- hashmap面试问题
- python 集合 gather
- Android颜色代码对照表
- Redis系列(三)-Redis发布订阅及客户端编程
- 国家中长期教育改革和发展规划纲要(2010-2020年)
- socket编程(七)
- outlook删除web邮件服务器,从Outlook中删除 Web 邮箱策略Exchange Online
- springboot酒店管理信息系统答辩PPT模板