摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/bMvbRp
可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cp2dZcQ
源代码下载请从 github 下载。
https://github.com/comehope/front-end-daily-challenges/tree/master/017-swapping-colors-loader-animation
代码解读定义 dom,一个容器中包含一个 span:
居中显示:
html, body, .loader { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black; }
设置 span 的样式:
.loader { width: 10em; height: 10em; font-size: 28px; position: relative; } .loader span { position: absolute; width: 100%; height: 100%; background-color: rgba(100%, 0%, 0%, 0.3); box-sizing: border-box; border: 0.5em solid; border-color: white rgba(100%, 100%, 100%, 0.2); }
在 dom 中把 span 增加到 5 个:
分别设置 5 个 span 的尺寸:
.loader span:nth-child(1) { width: calc(20% + 20% * (5 - 1)); height: calc(20% + 20% * (5 - 1)); } .loader span:nth-child(2) { width: calc(20% + 20% * (5 - 2)); height: calc(20% + 20% * (5 - 2)); } .loader span:nth-child(3) { width: calc(20% + 20% * (5 - 3)); height: calc(20% + 20% * (5 - 3)); } .loader span:nth-child(4) { width: calc(20% + 20% * (5 - 4)); height: calc(20% + 20% * (5 - 4)); } .loader span:nth-child(5) { width: calc(20% + 20% * (5 - 5)); height: calc(20% + 20% * (5 - 5)); }
增加颜色变幻的动画效果:
.loader span { animation: animate 5s ease-in-out infinite alternate; } @keyframes animate { 0% { /* red */ background-color: rgba(100%, 0%, 0%, 0.3); } 25% { /* yellow */ background-color: rgba(100%, 100%, 0%, 0.3); } 50% { /* green */ background-color: rgba(0%, 100%, 0%, 0.3); } 75% { /* blue */ background-color: rgba(0%, 0%, 100%, 0.3); } 100% { /* purple */ background-color: rgba(100%, 0%, 100%, 0.3); } }
再增加旋转效果:
@keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); } }
最后,为每个 span 设置动画延时,增加动感:
.loader span:nth-child(1) { animation-delay: calc(0.2s * (5 - 1)); } .loader span:nth-child(2) { animation-delay: calc(0.2s * (5 - 2)); } .loader span:nth-child(3) { animation-delay: calc(0.2s * (5 - 3)); } .loader span:nth-child(4) { animation-delay: calc(0.2s * (5 - 4)); } .loader span:nth-child(5) { animation-delay: calc(0.2s * (5 - 5)); }知识点
border-color https://developer.mozilla.org/en-US/docs/Web/CSS/border-color
calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc
rotate() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate
animation-delay https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52340.html
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbbyrX?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comeh...
摘要:过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效视频演 过往项目 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 5 月份发布的项目 《前端每日实战》专栏每天分解一个前端项目,用视频记录...
摘要:过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效视频演 过往项目 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 5 月份发布的项目 《前端每日实战》专栏每天分解一个前端项目,用视频记录...
阅读 2151·2021-11-15 11:39
阅读 946·2021-09-26 09:55
阅读 869·2021-09-04 16:48
阅读 2746·2021-08-12 13:23
阅读 881·2021-07-30 15:30
阅读 2418·2019-08-29 14:16
阅读 825·2019-08-26 10:15
阅读 501·2019-08-23 18:40