css3實現文字掃光漸變動畫效果的示例

2024-07-11 08:58:44

字體：大中小

來源：轉載

供稿：網友

本篇文章主要介紹了css3實現文字掃光漸變動畫效果的示例，分享給大家，具體如下：

利用css3這個屬性（背景剪裁）：

background-clip: border-box || padding-box || context-box || no-clip || text

本次用到的就是: -webkit-background-clip:text;

栗子：

1、

<style>    .masked{        text-align: center;        background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);        -webkit-text-fill-color: transparent;        -webkit-background-clip: text;        -webkit-background-size: 200% 100%;        -webkit-animation: masked-animation 4s infinite linear;      }    @-webkit-keyframes masked-animation {         0%{ background-position: 0 0;}         100% { background-position: -100% 0;}    }</style><div class="masked" >        <h1>→css3文字漸變動畫效果 >></h1></div>

說明：

-webkit-text-fill-color: transparent;(這里必須填充透明顏色，這樣漸變的顏色才會填充到文字上面，去掉這個或者填充別的顏色，效果不明顯)

檢索或設置對象中的文字填充顏色，若同時設置 <' text-fill-color '> 和 <' color '>，<' text-fill-color '> 定義的顏色將覆蓋 <' color '> 屬性；

效果：

2、跟第一個栗子差不多，多給了一個背景顏色，從局部到全局漸變

.slideShine{     background:#871317 -webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;     background-size:20% 100%;      -webkit-background-clip: text;     -webkit-text-fill-color: transparent;     font-size: 36px;     text-align: center;     font-weight: bold;     text-decoration: underline;}.slideShine {-webkit-animation: slideShine 4s linear infinite;animation: slideShine 4s linear infinite;}@-webkit-keyframes slideShine {     0% {          background-position: 0 0;        }     100% {          background-position: 100% 100%;      } } @keyframes slideShine {      0% {background-position: 0 0; }     100% {background-position: 100% 100%; } }<p class="slideShine" >→css3文字漸變動畫效果 >></p>

效果：

3、用webkit遮罩來實現文字漸變動畫

.text{position: relative;width: 57%;max-width:531px ;}.text .mask{position: absolute;width: 100%;height: 95%;top: 0;left: 0;-webkit-mask-image:  url(img/text.png);}            .text .mask i{position: absolute;height:100%;width: 20%;left:0;top:0;background:-webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;animation: lightLine1 4s linear infinite;-webkit-animation: lightLine1 4s linear infinite;background-size:100% 100%;}@keyframes lightLine1{    0%{transform:translateX(0) ;}                    100%{transform:translateX(500%);}}@-webkit-keyframes lightLine1{    0%{-webkit-transform:translateX(0) ;}                    100%{-webkit-transform:translateX(500%) ;}}<div class="text" style="margin: 150px auto;">     <img src="img/text.png" />     <div class="mask"><i></i></div>    </div>

效果：

4、實現多顏色文字的漸變

.text2{position: relative;width: 63%;max-width:586px ;}.text2 .mask{position: absolute;width: 100%;height: 95%;top: 0;left: 1px;-webkit-mask-image:  url(img/text3.png);}         .text2 .mask i{position: absolute;height:100%;width: 20%;left:0;top:0;background:-webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;animation: lightLine2 4s linear infinite;-webkit-animation: lightLine2 4s linear infinite;background-size:100% 100%;}@keyframes lightLine2{    0%{transform:translateX(0) ;}                    100%{transform:translateX(420%);}}@-webkit-keyframes lightLine2{    0%{-webkit-transform:translateX(0) ;}                    100%{-webkit-transform:translateX(420%) ;}}<div class="text2" style="margin: 150px auto;">   <img src="img/text3.png" />   <div class="mask"><i></i></div>    </div>

效果：