【每日一練】20—CSS實現(xiàn)文字動畫效果

寫在前面

<html><head><meta charset="UTF-8"><title>【每日一練】20—CSS實現(xiàn)文字動畫效果</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%;}}
寫在最后
以上就是每日一練的全部內(nèi)容,希望今天的小練習(xí)對你有用,如果你覺得有幫助的話,請點贊我,關(guān)注我,并將它分享給你身邊做開發(fā)的朋友,也許能夠幫助到他。
我是楊小愛,我們明天見。
學(xué)習(xí)更多技能
請點擊下方公眾號
![]()

評論
圖片
表情
