今天来到了我们的第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=)