如何用纯 CSS 创作一个跳 8 字型舞的 loader
2018-11-29 00:46
567 查看
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/gKNMMm
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cd339Ur
源代码下载
在线演示 本地下载每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 5 个元素:
<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-color: goldenrod; }
定义容器尺寸:
.loader { width: 8em; height: 8em; font-size: 30px; }
画出圆点:
.loader span { position: absolute; top: 4em; width: 1em; height: 1em; background-color: #222; border-radius: 50%; }
定义动画效果:
.loader span { transform-origin: 4em top; animation: dance 1s linear infinite; } @keyframes dance { to { transform: rotateX(360deg) rotateZ(360deg); } }
最后,为各圆点增加动画延时:
.loader span { animation-delay: calc((var(--n) - 5) * 0.1s); } .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; }
大功告成!
原文地址:https://segmentfault.com/a/1190000015534639 阅读更多相关文章推荐
- 如何用纯 CSS 创作一个变色旋转动画
- 如何用纯 CSS 创作一个跳动的字母 i
- 如何用纯 CSS 创作一个小球上台阶的动画
- 如何用css显示一个图片中多个小图标?
- 浅谈css中一个元素如何在其父元素居中显示
- 如何写一个很小的 CSS 文件
- 如何用html5创作一个游戏
- CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
- [转载]如何创作一个优秀的编程博客
- 速度优化:只加载一个CSS满足所有要求、针对不同浏览器加载不同CSS、正式站改版测试如何不影响用户体验
- 如何使用CSS栅格布局创建一个简单页面布局
- 如何对一个博客系统进行CSS管理?
- 问 jquery如何删除一个css属性
- CSS如何让一个按钮居中应该怎么做
- 如何制作一个漂亮的 CSS 按钮
- CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
- [css]如何让一个元素div1的宽度由子元素的宽度决定,并超出父元素div0
- 如何css做一个点击导航 页面滚动, 并且有动画效果
- [置顶] 【实战】如何通过html+css+mysql+php来快速的制作动态网页(以制作一个博客网站为列)
- 如何利用CSS给同一个网页中的超链接设置设置不同的样式?