前端每日实战: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 描述程序员的生活的更多相关文章
- 56.纯 CSS 描述程序员的生活
原文地址:https://segmentfault.com/a/1190000015316996 感想:动画加延时,white-space: pre; 保留HTML p 中刻意留下的空白. HTML ...
- 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 此视频是可 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
- 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...
- 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...
- 前端每日实战:161# 视频演示如何用纯 CSS 创作一张纪念卓别林的卡片(没有笑声的一天就是被荒废的一天)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WaaBNV 可交互视频 此视频是可 ...
- 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...
- 前端每日实战:126# 视频演示如何用纯 CSS 创作小球变矩形背景的按钮悬停效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 此视频是可 ...
- 前端每日实战:138# 视频演示如何用纯 CSS 创作一张 iPhone 价格信息图
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OorLGZ 可交互视频 此视频是可 ...
随机推荐
- Activiti插件安装(二)
Eclipse安装 网络在线安装:1) 打开 Help -> Install New Software. 在如下面板中: 2) 在如下 Install 界面板中,点击 Add 按钮: 配置新装插 ...
- 2A3T我的PMP备考及考试心得20181208
2018年的下半年由于工作不是很忙,所以生活中有更好的精力去做些自己的事情.出于工作需要,我决定考个证书充实下自己,在各大网站搜索解惑后决定考PMP,并报了个培训班 一.PMP考试简介 共200道选择 ...
- vue动态路由传值以及get传值及编程式导航
1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...
- JSON字符串格式化为JSON对象
根据项目需要,需要对json格式的字符串格式化为json对象,以下是解决方法: 参考文章:https://www.cnblogs.com/cailijuan/p/10150918.html
- mysql主从架构,IO、SQL线程运行为YES,从库没有同步数据
mysql基于binlog主从复制架构,IO.SQL线程运行为YES,从库没有同步数据 Slave_IO_Running: Yes Slave_SQL_Running: Yes Replicate_D ...
- jmeter之非GUI启动与执行脚本
启动jmeter的图形界面可以从dos窗口输命令启动:图形界面还是比较占资源的,这时候可以通过dos窗口来执行脚本,获取性能结果 目录 1.dos窗口启动jmeter图形界面 2.dos窗口执行脚本, ...
- delphi 神经网络 学习
https://github.com/uldercarrilho/ParallelNeuralNetwork
- python实现基于两张图片生成圆角图标效果的方法
python实现基于两张图片生成圆角图标效果的方法 这篇文章主要介绍了python实现基于两张图片生成圆角图标效果的方法,实例分析了Python使用pil模块进行图片处理的技巧,分享给大家供大家参考. ...
- mysql-M-S-S模型 中继器 级联
1.基础环境 三台虚机并且安装有mysql 并且同步好数据库 2.主服务器-创建账号并授权 mysql> create user 'mslave'@'X.X.X.X' identified by ...
- 应该用forEach改变数组的值吗? 原生JS forEach()和map()遍历的异同点
应该用forEach改变数组的值吗? https://segmentfault.com/q/1010000013170900?utm_source=index-hottest 由于js中的数组是引用类 ...