原文地址: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. js this详解,事件的三种绑定方式

    this,当前触发事件的标签 在绑定事件中的三种用法: a. 直接HTML中的标签里绑定 onclick="fun1()"; b. 先获取Dom对象,然后利用dom对象在js里绑定 ...

  2. 安装老版本redis .NET 客户端

    https://github.com/ServiceStackV3/ServiceStackV3 PM> Install-Package ServiceStack -Version 3.9.71 ...

  3. influxDB 0.9 C# 读写类

    influxDB 0.9 C# 读写类   目前influxdb官网推荐的C#读写类是针对0.8版本的,截至本文写作之前,尚未发现有针对0.9的读写类. 我使用influxdb的是用于保存服务器的运行 ...

  4. 两招解决异常_Cannot find any information on property 'XXX' in a bean of type 'XXX'的问题

    第一招 在进行Java Web项目开发的时候,我碰到过下面这个异常: Cannot find any information on property 'XXX' in a bean of type ' ...

  5. neo4j---删除关系和节点

    本文转载自:https://blog.csdn.net/chenjf0221/article/details/70238695 删除节点和节点关系 MATCH (a:key)-[r:KEY_WORD] ...

  6. pandas的离散化,面元划分

    pd.cut pandas.cut(x, bins, right=True, labels=None, retbins=False, precision=, include_lowest=False) ...

  7. Android 引用库项目,Debug 库项目

    转自:http://www.cnblogs.com/xitang/p/3615768.html#commentform 使用引用项目,无法追到源代码,无法Debug库项目The JAR of this ...

  8. P1258小车问题

    传送 很多人质疑它是二分,但其实它就是二分(我会说我不会解方程吗) 据说有很多人没看懂题干在说些什么,那就不要管题干了.拿样例算一遍,我们看看样例的答案是怎么算出来的. 这是样例.看到这个数,我们很懵 ...

  9. 服务容错保护断路器Hystrix之七:做到自动降级

    从<高可用服务设计之二:Rate limiting 限流与降级>中的“自动降级”中,我们这边将系统遇到“危险”时采取的整套应急方案和措施统一称为降级或服务降级.想要帮助服务做到自动降级,需 ...

  10. spring4.0之三:@RestController

    spring4.0重要的一个新的改进是@RestController注解,它继承自@Controller注解.4.0之前的版本,Spring MVC的组件都使用@Controller来标识当前类是一个 ...