摘要:可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,容器中包含个段落,每个段落行代码居中显示代码布局定义动画设置动画延时,描述单步执行的场景大功告成
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/YvYVvY
可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cN6L9SZ
源代码下载每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读定义 dom,容器中包含 6 个段落,每个段落 1 行代码:
function repeat() {
eat();
sleep();
code();
repeat();
}
居中显示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }
代码布局:
.code { background-color: silver; padding: 1em 0; font-size: 24px; font-family: monospace; border-radius: 0.5em; } .code p { white-space: pre; padding: 0 1em; margin: 0.5em; }
定义动画:
.code p:not(:last-child) { animation: step 2s infinite; } @keyframes step { 0%, 25% { color: white; background-color: dodgerblue; } 26%, 100% { color: black; background-color: transparent; } }
设置动画延时,描述单步执行的场景:
.code p:not(:last-child) { animation-delay: var(--d); } .code p:nth-child(2) { --d: 0s; } .code p:nth-child(3) { --d: 0.5s; } .code p:nth-child(4) { --d: 1s; } .code p:nth-child(1), .code p:nth-child(5) { --d: 1.5s; }
大功告成!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54573.html
摘要:可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,容器中包含个段落,每个段落行代码居中显示代码布局定义动画设置动画延时,描述单步执行的场景大功告成 showImg(https://segmentfault.com/img/bVbcqOs?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如 过往项目 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 6 月份发布的项目 ...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如 过往项目 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 6 月份发布的项目 ...
阅读 643·2023-04-25 15:49
阅读 3099·2021-09-22 15:13
阅读 1235·2021-09-07 10:13
阅读 3466·2019-08-29 18:34
阅读 2554·2019-08-29 15:22
阅读 498·2019-08-27 10:52
阅读 676·2019-08-26 18:27
阅读 3008·2019-08-26 13:44