原文地址:https://segmentfault.com/a/1190000015316996

感想:动画加延时,white-space: pre; 保留HTML p 中刻意留下的空白。

HTML code:

<div class="code">
<p>function repeat() {</p>
<p> eat();</p>
<p> sleep();</p>
<p> code();</p>
<p> repeat();</p>
<p>}</p>
</div>

CSS code:

html, body {
margin:;
padding:;
}
/* body子元素水平垂直居中 */
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* 代码布局 */
.code{
padding: 1em 0;
border-radius: 0.5em;
font-size: 24px;
font-family: monospace;
background-color: silver;
}
.code p{
margin: 0.5em;
padding: 0 1em;
/* 保留html段落中刻意打印的空白 https://developer.mozilla.org/en-US/docs/Web/CSS/white-space */
white-space: pre;
}
/* 定义动画 */
.code p:not(:last-child){
animation: step 2.5s infinite;
/* 设置动画延时 */
animation-delay: var(--d);
}
@keyframes step{
0%, 25%{
color: white;
background-color: dodgerblue;
}
25%, 100%{
color: black;
background-color: transparent;
}
}
.code p:nth-child(1){
--d: 0s;
}
.code p:nth-child(2){
--d: 0.5s;
}
.code p:nth-child(3) {
--d: 1s;
}
.code p:nth-child(4) {
--d: 1.5s;
}
.code p:nth-child(5) {
--d: 2s;
}

56.纯 CSS 描述程序员的生活的更多相关文章

  1. 前端每日实战:56# 视频演示如何用纯 CSS 描述程序员的生活

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YvYVvY 可交互视频 此视频是可 ...

  2. 有感于三个50岁的美国程序员的生活状态与IT职业杂想

    前言 这篇杂记其实是去年也就是 2013年9月30日写的,还上过博客园十日推荐的首页,后来在整理博客分类时七弄八弄误删掉了好多文章,就包括这一篇.今天,2014年9月29日,恰好恰好一年的时候居然在好 ...

  3. 转载——有感于三个50岁的美国程序员的生活状态与IT职业杂想

    明天就是国庆节了,今天也不想干活干的太累了!写一篇以前去美国出差的杂想,对比于美国50多岁的程序员和大多数50多岁国内父母的生活状态有感而发. 前几年正好有一个项目的机会出差去了一次美国,地点是美国中 ...

  4. Spring MVC 程序首页的设置 - 一号门-程序员的工作,程序员的生活(java,python,delphi实战)

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  5. CSS 是程序员的画笔

    在未来的所有界面.皮肤,都将使用CSS来表现.包括网页.应用.甚至现实物体的包装等等. 因为CSS实践的理念十分优秀:抽离.分类.统一. CSS将是程序员的画笔. 刚做出来的程序基本都是一个样子.产品 ...

  6. 简明python教程 --C++程序员的视角(一):数值类型、字符串、运算符和控制流

    最初的步骤 Python是大小写敏感的 任何在#符号右面的内容都是注释 >>> help('print')在“print”上使用引号,那样Python就可以理解我是希望获取关于“pr ...

  7. IBM 总架构师:话说程序员的职业生涯

    作者:IBM 软件集团大中华区总架构师 寇卫东 有一些年轻的程序员向我咨询,将来的路应该怎么走?俗话说,条条大路通罗马.不同的路都能走向成功.到底选哪条路,取决于自己的兴趣.可能有程序员会问:如果还没 ...

  8. [zz]论程序员

    g9老大多年前的趣文: 论程序员 根据钱钟书先生的<论文人>胡改的.聊搏一笑,文责不负.程序员是可嘉奖的,因为他虚心,知道上进,并不拿身分,并不安本分.真的,程序员对于自己,有时比旁人对于 ...

  9. 程序员为什么要写if else,为什么要和别人不一样

    程序员为什么要写if else,为什么要和别人不一样 前言 无聊,睡不着!本文只是随便写写而已!感叹一下程序员的生活! 刚看到一个八级程序员的分级,所以就写了这个随笔,分级如下:        第八级 ...

随机推荐

  1. TStringList的用法

    TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. TStringList 常用方法与属性: var List: TStringList; i: Integer; begin ...

  2. DLL对象类型转换

    //以下代码是错误的!!! //这一节主要告诉大家,以这种方式进行开发dll是不对的以及错误原因,正确的方式是什么! //DLL内创建对象,并把对象返回 function GetDataSet(str ...

  3. 如何写出健壮的Java代码

    近来在公司写代码,写出的代码发现BUG很多,为了实现一个功能,代码改了又改,影响了工单的效率,也影响个人绩效,因此从网上找了些关于写健壮代码的文章看了看,再加上自己的一些经验总结. 所谓健壮的代码是指 ...

  4. 跟着未名学Office - 高效工作Outlook

    目录 第一篇邮件与联系人    1 第一节    使用与技巧    1 第二节    高效    11 第二篇    事务助手    21 第一节    日程管理    21 第二节    任务    ...

  5. Django-models-迁移错误

    错误表现:数据表二次迁移时:django.db.utils.InternalError: (1138, 'Invalid use of NULL value') 错误原因:是因为二次修改了null值属 ...

  6. 数据仓库专题(2)-Kimball维度建模四步骤

    一.前言 四步过程维度建模由Kimball提出,可以做为业务梳理.数据梳理后进行多维数据模型设计的指导流程,但是不能作为数据仓库系统建设的指导流程.本文就相关流程及核心问题进行解读. 二.数据仓库建设 ...

  7. windows下怎么生成github的ssh公钥

    windows下如何生成github的ssh公钥: 1.首先你要安装Git工具 2.在C:\Documents and Settings\Administrator\目录下,运行Git Bash he ...

  8. [蓝桥杯]ALGO-122.算法训练_未名湖边的烦恼

    问题描述 每年冬天,北大未名湖上都是滑冰的好地方.北大体育组准备了许多冰鞋,可是人太多了,每天下午收工后,常常一双冰鞋都不剩. 每天早上,租鞋窗口都会排起长龙,假设有还鞋的m个,有需要租鞋的n个.现在 ...

  9. DB2 Rename SQL0108N错误

    今天DB2 Rename的时候遇到了“SQL0108N ‘表名’名称的限定符数是错误的. 语句如下: db2 rename tableA to tableB 异常: SQL0108N The name ...

  10. 第一个react

    个人觉着react和vue是很相似的,之前还转载过一篇介绍两个异同点的文章,那个时候还完全不懂react,现在才慢慢开始接触,所以只能总结一些个人的心得,首先自然是react的优点了,个人觉着主要有以 ...