56.纯 CSS 描述程序员的生活

原文地址：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: 0;
    padding: 0;
}
/* 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;
}