其他
【每日一练】20—CSS实现文字动画效果
写在前面
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>【每日一练】20—CSS实现文字动画效果</title></head><body> <h1 data-text="正在加载中...">正在加载中...</h1></body></html>*{ 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%; }}写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号