這篇文章帶給大家的內容是關於如何使用純CSS實現文本的淡入動畫效果(附源碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
https://github.com/comehope/front- end-daily-challenges
定義dom,容器包含若干子元素,每個子元素是1 個字母:
<div> <span>h</span> <span>a</span> <span>p</span> <span>p</span> <span>y</span> <span> </span> <span>h</span> <span>o</span> <span>l</span> <span>i</span> <span>d</span> <span>a</span> <span>y</span> <span>s</span> </div>
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(pink, white, pink); }
設定字體樣式:
.container span { display: inline-block; color: purple; font-weight: bold; text-transform: uppercase; font-size: 40px; }
定義文字從左到右的移動效果:
.container span { animation: sideSlide 4s forwards infinite; transform: translateX(-100vw); } @keyframes sideSlide { 15%, 20% { transform: translateX(0.5em); } 24% { transform: translateX(0); } 25%, 75% { transform: translateX(0); } 90%, 100% { transform: translateX(100vw); } }
增加文字縮放的動畫效果:
.container span { transform: translateX(-100vw) scale(0); } @keyframes sideSlide { 15%, 20% { transform: translateX(0.5em) scale(1); } 24% { transform: translateX(0) scale(1.2); } 25%, 75% { transform: translateX(0) scale(1); } 90%, 100% { transform: translateX(100vw) scale(0); } }
增加文字入場和出場時的淡入淡出效果:
.container span { filter: opacity(0); } @keyframes sideSlide { 15%, 20% { transform: translateX(0.5em) scale(1); } 24% { transform: translateX(0) scale(1.2); } 25%, 75% { transform: translateX(0) scale(1); filter: opacity(1); } 90%, 100% { transform: translateX(100vw) scale(0); filter: opacity(0); } }
增加文字變色的效果:
@keyframes sideSlide { 15%, 20% { transform: translateX(0.5em) scale(1); color: purple; } 24% { transform: translateX(0) scale(1.2); color: cyan; } 25%, 75% { transform: translateX(0) scale(1); filter: opacity(1); color: purple; } 90%, 100% { transform: translateX(100vw) scale(0); filter: opacity(0); } }
設定子元素的下標變數:
.container span:nth-child(1) { --n: 1; } .container span:nth-child(2) { --n: 2; } .container span:nth-child(3) { --n: 3; } .container span:nth-child(4) { --n: 4; } .container span:nth-child(5) { --n: 5; } .container span:nth-child(6) { --n: 6; } .container span:nth-child(7) { --n: 7; } .container span:nth-child(8) { --n: 8; } .container span:nth-child(9) { --n: 9; } .container span:nth-child(10) { --n: 10; } .container span:nth-child(11) { --n: 11; } .container span:nth-child(12) { --n: 12; } .container span:nth-child(13) { --n: 13; } .container span:nth-child(14) { --n: 14; }
設定子元素的動畫延遲:
.container span { animation-delay: calc((var(--n) - 1) * 0.05s); }
大功告成!
以上是如何使用純CSS實現文字的淡入動畫效果(附源碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!