《前端每日實戰》第172號做品：向平凡而又偉大的醫護人員致敬！

這是一場沒有硝煙的戰鬥，咱們普通人能作的就是守在家裏，靜待疫情結束。向那些冒着生命危險救助患者的醫護人員們，致敬！

效果預覽

按下右側的「點擊預覽」按鈕能夠在當前頁面預覽，點擊連接能夠全屏預覽。

https://codepen.io/comehope/pen/gObyOMQ

源代碼下載

每日前端實戰系列的所有源代碼請從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

1、定義 DOM 結構

dom 結構是一個名爲 .words 的容器，內含 5 個 <p> 標籤，每一個 <p> 標籤中有一句話：

<div class="words">
    <p>大家</p>
    <p>在沒有硝煙的</p>
    <p>戰場上</p>
    <p>把生命之光</p>
    <p>再次點燃</p>
</div>

令容器在頁面居中：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

效果以下圖：

2、佈局文字

用 flex 佈局，設置容器的寬度爲 5em，由於有 5 個 <p> 標籤，因此每句話佔用 1em，造成文字豎排效果。文字的字號用 vmin 單位，即隨頁面大小自動調整字號的大小。

.words {
    display: flex;
    font-size: 15vmin;
    width: 5em;
}

.words p {
    line-height: 1em;
    margin: 0;
}

效果以下圖：

文字加粗，並加上陰影：

.words {
    font-family: sans-serif;
    font-weight: bold;
}

.words p {
    text-shadow: 0.05em 0.05em 0.3em hsla(0, 0%, 0%, 0.4);
}

效果以下圖：

設置頁面的顏色爲 dodgerblue，即寶石藍色。由於 color 屬性會被子元素繼承，因此文字的顏色也變成寶石藍色融入了背景中，實際上如今看到的僅僅是文字的陰影而已：

body {
    color: dodgerblue;
    background-color: currentColor;
}

效果以下圖：

3、動畫效果

建立一個名爲 appear 的關鍵幀，其中只有 1 幀，即在動畫週期的 50% 爲文字增長陰影，其實這行代碼正是從 .words p 移過來的。動畫效果是時長 6 秒的無限循環動畫：

.words p {
    /*text-shadow: 0.05em 0.05em 0.3em hsla(0, 0%, 0%, 0.4);*/
    animation: appear 6s ease-in-out infinite;
}

@keyframes appear {
    50% {
        text-shadow: 0.05em 0.05em 0.3em hsla(0, 0%, 0%, 0.4);
    }
}

效果以下圖：

接下來令每一句話逐個浮現，實現方法是爲每一個 <p> 標籤設置一個 --n 變量，而後爲動畫設置 animation-delay 屬性，用表達式爲全部 <p> 標籤設置從 1 秒到 5 秒的延遲時長，令動畫看起來是一句一句地依次浮現：

.words p {
    animation-delay: calc(var(--n) * 1s);
}

.words p:nth-child(1) {--n: 1;}
.words p:nth-child(2) {--n: 2;}
.words p:nth-child(3) {--n: 3;}
.words p:nth-child(4) {--n: 4;}
.words p:nth-child(5) {--n: 5;}

效果以下圖：

接下來，定義一個名爲 move 的關鍵幀，令 p 元素從它原始位置稍偏左向稍偏右移動，使動畫的動感更強烈。由於一共有 appear 和 move 2 組關鍵幀，因此需增長一個 animation-name 屬性，專門用於定義多組關鍵幀：

.words p {
    /*animation: appear 6s ease-in-out infinite;*/
    animation: 6s ease-in-out infinite;
    animation-name: appear, move;
}

@keyframes move {
    from {transform: translateX(-30%);}
    to {transform: translateX(30%);}
}

效果以下圖：

大功告成！

參考

• flex 佈局，《CSS3 藝術》第1.8.1節
• 陰影，《CSS3 藝術》第5.1.1節
• 動畫 animation，《CSS3 藝術》第10章

關於個人書《CSS3 藝術》

拙做《CSS3 藝術》全綵印刷，使用100多個生動美觀的實例，系統地剖析了 CSS 與視覺效果相關的重要語法，並含有近10小時的視頻演示。2020年1月由人民郵電出版社出版，京東/天貓/噹噹有售，配套資源請訪問人民郵電出版社公衆號：https://mp.weixin.qq.com/s/6X42QkZ5N8JNji8aQ2FFcQ