前端每日实战:56# 视频演示如何用纯 CSS 描述程序员的生活
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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 行代码:
<div class="code"><p>function repeat() {</p><p> eat();</p><p> sleep();</p><p> code();</p><p> repeat();</p><p>}</p>
</div>
居中显示:
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;
}
大功告成!
前端每日实战:56# 视频演示如何用纯 CSS 描述程序员的生活相关推荐
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 前端每日实战:93# 视频演示如何用纯 CSS 创作一根闪电连接线
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBjdzZ 可交互视频 此视频是可 ...
- 前端每日实战:100# 视频演示如何用纯 CSS 创作闪闪发光的霓虹灯文字
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GBwvxw 可交互视频 此视频是可 ...
- 前端每日实战:60# 视频演示如何用纯 CSS 创作一块乐高积木
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKKqrv 可交互视频 此视频是可 ...
- 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...
- 前端每日实战:114# 视频演示如何用纯 CSS 和混色模式创作一个 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MqYroW 可交互视频 此视频是可 ...
- 前端每日实战:34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qYepNv 可交互视频教程 此视频 ...
- 前端每日实战:151# 视频演示如何用纯 CSS 创作超能陆战队的大白
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ReGRaO 可交互视频 此视频是可 ...
- 前端每日实战:62# 视频演示如何用纯 CSS 创作一只蒸锅
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YvOzNy 可交互视频 此视频是可 ...
最新文章
- 彻底搞懂 Nginx 的五大应用场景
- 测量接线导通问题解决方案
- Django中载入js和css文件
- 华为的鸿蒙系统营销,全球第一款搭载华为鸿蒙系统的荣耀智慧屏终端在万众期待中正式上线销售...
- img title属性值利用#13换行
- Array K-Coloring
- java设计模式之设计原则⑤迪米特原则
- 解决 JSP 页面报错 equal symbol expected
- Airflow 中文文档:调度和触发器
- Proxmark3教程1:小白如何用PM3破解复制M1全加密门禁IC卡
- [ FAILED ] SGDSolverTest/0.TestSnapshotShare, where TypeParam = caffe::CPUDevicefloat解决方案
- 8: springMVC ModelAndView 作用与功能解析
- [android] android下文件访问的权限
- iphone android 功能清单,iPhone的这几个App,让你的工作效率翻倍(1)
- 柯马机器人示教器编程_COMAU柯马机器人示教器按键失灵,无显示专业维修
- Stacked Hourglass Networks简析
- 波导缝隙天线仿真出现较大副瓣,添加波导端口吸收副瓣
- 解决ios7.x越狱后静态壁纸变为空白
- Ice.ConnectFailedException
- Contest 20140914 Mushroom写情书 字符串雙hash 後綴數組
热门文章
- python访问序列元素的编号用什么括起来_python-重新编号数组中元素的有效方法...
- linux中iptable中端口,Linux如何打开iptables中的端口
- linux svn同步到本地目录,LINUX中SVN服务的搭建与实现SVN 自动同步到web目录,SVN自动启动...
- 知道python语言应用2020答案_热点:大学moocPython语言基础与应用答案
- Java编程基础阶段笔记 day 07 面向对象编程(上)
- activiti 视图
- Flask 框架app = Flask(__name__) 解析
- SQL递归查询(with as)
- Android之网络编程利用PHP操作MySql插入数据(四)
- VC++ 使用attributes定义接口