zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    HTML5:超文本标记语言
    Redis持久化
    ACID VS BASE+CAP
    Redis
    NoSQL(Redis、Menchche、MongoDB)
    transient关键字
    Struts2声明式验证相关问题
    struts2国际化相关问题
    Struts2
    SSH整合的详细步骤
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10612773.html
Copyright © 2011-2022 走看看