HTML5怎么實現動態文字遮罩背景特效

這篇文章主要介紹“HTML5怎么實現動態文字遮罩背景特效”，在日常操作中，相信很多人在HTML5怎么實現動態文字遮罩背景特效問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML5怎么實現動態文字遮罩背景特效”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　鼠標滑過遮罩文字背景動畫效果

　　第一種效果的最終效果如下，用鼠標放上去看看：

　　Welcome to htmleaf.com

　　HTML結構

　　Welcome to Codicode

　　CSS樣式

　　body

　　{

　　background-color:#fff;

　　}

　　#bkDiv

　　{

　　// The rainbow Css3 pattern

　　background: linear-gradient（0deg, transparent 0%, #31009c 10%, #000084 25%,#009cff 37%,#00bd00 50%,#fff700 62%,#ff6331 75%,#de0000 90%,transparent 100%）;

　　background-color: #333;

　　background-size: 10px 125px;

　　background-repeat : repeat;

　　height : 100px;

　　width : 620px;

　　background-position:center -65px;

　　transition: background-position 1s;

　　}

　　#bkDiv:hover

　　{

　　// on Hover the background translates 65px down

　　background-position:center 0px;

　　}

　　#theText

　　{

　　font-family:Impact, Charcoal, sans-serif;

　　font-size:65px;

　　stroke:#000;

　　stroke-width:3px;

　　fill-opacity:0.5;

　　}

　　當作為背景的div被鼠標滑過時，CSS3背景將產生過渡動畫效果。當鼠標滑出時，背景的原點位置將回到原來的位置上。這里設置過渡動畫的時間為1秒鐘。

　　另外，文字有50%的透明度和3像素的描邊，使文字看起來更加好看。

　　遮罩文字背景持續動畫效果

　　先來看一下第二種Disco效果的遮罩文字背景動畫效果：

　　Night CLUB

　　第二個遮罩文字背景動畫效果的HTML代碼和第一個例子是一樣的：

　　HTML結構

　　Welcome to Codicode

　　CSS樣式

　　body

　　{

　　background-color:#fff;

　　}

　　#bkDiv

　　{

　　// Red dots Css3 pattern

　　background: linear-gradient（-45deg, #036 30%,transparent 45%,transparent 55%,#036 70%），

　　linear-gradient（45deg, #036 30%,transparent 45%,transparent 55%,#036 70%）;

　　background-color: #f00;

　　background-size: 15px 15px;

　　background-position:0px 0px;

　　height:150px;

　　width:550px;

　　// Animating red dots （infinite loop）

　　animation: cAnim 1s linear 0s infinite;

　　}

　　@keyframes cAnim

　　{

　　100% {background-position:15px 0px;}

　　}

　　#theText

　　{

　　font-family:Impact, Charcoal, sans-serif;

　　font-size:120px;

　　stroke:#000;

　　stroke-width:5px;

　　fill-opacity:0.1;

　　stroke-opacity:1;

　　// Strobe light effect animation

　　animation: cAnim1 0.5s linear 0s infinite;

　　}

　　@keyframes cAnim1

　　{

　　100% {fill-opacity:0.9;stroke-opacity:0.5;}

　　}

　　在第二個例子中同時執行了兩種動畫，第一個動畫是在背景上移動小圓點，第二個動畫是在SVG文字的邊框執行閃動效果。

到此，關于“HTML5怎么實現動態文字遮罩背景特效”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！