前端每日实战: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 可交互视频 此视频是可 ...
最新文章
- Linux 高可用开源方案 Keepalived VS Heartbeat对比
- Java SE7新特性之try-with-resources语句
- rust(25)-皮尔逊相关系数
- 深度学习(10)TensorFlow基础操作六: 数学运算
- cocos2dx 字体外发光_在电致发光研发领域,选择有机材料是基于哪些原因?
- matlab做三次拉格朗日插值多项式_买菜必用的MATLAB拉格朗日插值函符号解输出
- 支持向量机在风控竞赛数据集上的应用
- 金鹏GB28181平台对接
- 使用 Unbound 创建DNS服务器
- jQuery源码结构
- vb.net 教程 3-1 窗体编程基础 2
- linux灯控软件下载,舞台灯光控制软件(MaizeDMX)
- 电子邮件邮箱怎么设置签名?手机邮箱签名设置攻略
- 编辑中的word变成只读_教大家word文档变成只读模式怎么改
- 【​观察】POWER9,一个全面开创AI时代的芯片来了!
- 阿里和微博的异地多活方案
- php发送邮件教程,支持发送有附件的电子邮件-PHPMailer使用教程
- 文学-诗经,乌托邦,巨人传,作家,居士类
- python多线程读取列表
- python xlsx 转csv
热门文章
- Oracle filter 函数,Oracle数据库之SQL单行函数---字符函数续
- mysql 分表索引_mysql中,分表查询和索引查询哪个更快?
- redistemplate注入为null_Windows DLL 注入技术
- 国内厂商对鸿蒙系统的态度,鸿蒙系统4月上线,国内手机厂商态度很关键!小米、中兴出乎意料...
- Kullback–Leibler divergence(相对熵,KL距离,KL散度)
- pytorch简单框架
- Java生鲜电商平台-SpringCloud微服务架构中分布式事务解决方案
- Anaconda3自带jupyter
- 父div高度和宽度的应用
- js(function(){alert(‘’‘)})