Luo CSS Fade Text -animaatio

Blogi

Tämä video opastaa sinua suunnittelemaan häivytettyä teksti -animaatiota HTML: n, CSS: n ja JavaScriptin avulla. Tässä olemme käyttäneet JavaScriptiä tekstin muuntamiseen yksittäiseksi span -elementiksi ja span -elementti on muotoiltu CSS: n avulla. Häivyttävän animaatiotehosteen saavuttamiseksi käytetään kolmea ominaisuutta eli asentoa, opasiteettia ja sumennusta.

Tilaa: https://www.youtube.com/channel/UCXDLrsqe14uFu6k96xjlF4w

Lähdekoodi

HTML

CSS Fade Text Animation.

CSS

body { background:#111; font-family:'Oswald',sans-serif; } .text-animation { color:#fff; opacity:0; } .text-animation span { position:relative; top:10px; left:10px; font-size:50px; font-weight:600; opacity:0; text-transform:uppercase; animation:fade 400ms ease-in-out forwards; } .center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } @keyframes fade { 0% { top:10px; left:10px; filter:blur(15px); opacity:0; } 50% { filter:blur(10px); opacity:0.9; } 100% { top:0px; left:0px; filter:blur(0px); opacity:1; } }

JS

var wrapper = document.getElementsByClassName('text-animation')[0]; wrapper.style.opacity='1'; wrapper.innerHTML = wrapper.textContent.replace(/./g,'$&'); var spans = wrapper.getElementsByTagName('span'); for(var i=0;i

#css #javascript #html

Luo CSS Fade Text -animaatio

Tämä video opastaa sinua suunnittelemaan häivytettyä teksti -animaatiota HTML: n, CSS: n ja JavaScriptin avulla. Tässä olemme käyttäneet JavaScriptiä tekstin muuntamiseen yksittäiseksi span -elementiksi ja span -elementti on muotoiltu CSS: n avulla.