您好,登錄后才能下訂單哦!
這篇文章主要介紹了怎么使用純CSS實(shí)現(xiàn)文本淡入動(dòng)畫效果,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
https://github.com/comehope/front-end-daily-challenges
定義 dom,容器中包含若干子元素,每個(gè)子元素是 1 個(gè)字母:
<div class="container"> <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); }
設(shè)置字體樣式:
.container span { display: inline-block; color: purple; font-weight: bold; text-transform: uppercase; font-size: 40px; }
定義文字從左到右的移動(dòng)效果:
.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); } }
增加文字縮放的動(dòng)畫效果:
.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); } }
增加文字入場(chǎng)和出場(chǎng)時(shí)的淡入淡出效果:
.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); } }
設(shè)置子元素的下標(biāo)變量:
.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; }
設(shè)置子元素的動(dòng)畫延時(shí):
.container span { animation-delay: calc((var(--n) - 1) * 0.05s); }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享怎么使用純CSS實(shí)現(xiàn)文本淡入動(dòng)畫效果內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問題就找億速云,詳細(xì)的解決方法等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。