今天來到了我們的第20個小項目的練習，距離我們100個小項目的練習，我們已經完成了五分之一了，剩下的五分之四，我們一起加油練習。
今天練習的這個小項目是一個CSS實作的文字動畫效果，主要就是用在頁面加載時的效果，現在，我們一起來看一下這個項目的最終效果：
HTML代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>【每日一練】20—CSS實作文字動畫效果</title> </head> <body> <h1 data-text="正在加載中...">正在加載中...</h1> </body> </html>
CSS代碼：
* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #252839; } h1 { position: relative; font-size: 14vw; color: #252839; line-height: 1.2em; text-transform: uppercase; -webkit-text-stroke: 0.3vw #383d52; } h1:before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 0; height: 100%; color: #01fe87; overflow: hidden; -webkit-text-stroke: 0vw #383d52; border-right: 4px solid #01fe87; animation: animate 4s linear infinite; } @keyframes animate { 0%,10%,100% { width: 0; } 70%,90% { width: 100%; } }
寫在最後
以上就是每日一練的全部内容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，關注我，并将它分享給你身邊做開發的朋友，也許能夠幫助到他。
![十大酷炫屌的圖像懸停特效[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)