欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3實現(xiàn)文字掃光漸變動畫效果的示例

  發(fā)布時間:2017-11-07 16:27:30   作者:U_can   我要評論
這篇文章主要介紹了css3實現(xiàn)文字掃光漸變動畫效果的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

本篇文章主要介紹了css3實現(xiàn)文字掃光漸變動畫效果的示例,分享給大家,具體如下:

利用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;(這里必須填充透明顏色,這樣漸變的顏色才會填充到文字上面,去掉這個或者填充別的顏色,效果不明顯)

檢索或設(shè)置對象中的文字填充顏色,若同時設(shè)置 <' 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遮罩來實現(xiàn)文字漸變動畫

.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、實現(xiàn)多顏色文字的漸變

.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>

效果:

因為單純用第一、二種方法實現(xiàn)不了多種文字的顏色,他都會被<' text-fill-color '>定義的顏色覆蓋,所以如果設(shè)置文字多種顏色的話,我就用圖片來代替了,不過可以看出,用遮罩來實現(xiàn)文字漸變彩虹的效果不佳-^-

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • CSS3下的漸變文字效果實現(xiàn)示例

    這篇文章主要介紹了CSS3下的漸變文字效果實現(xiàn)示例的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-02
  • css 進(jìn)度條的文字根據(jù)進(jìn)度漸變的示例代碼

    這篇文章主要介紹了css 進(jìn)度條的文字根據(jù)進(jìn)度漸變的示例代碼,介紹了進(jìn)度條里面的文字需要根據(jù)進(jìn)度的長度而變化,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一
    2018-01-09
  • CSS3文字背景色漸變過渡特效源碼

    CSS3文字背景色漸變過渡特效源碼是一段實現(xiàn)了文字顏色漸變過渡效果代碼,本段代碼適應(yīng)于所有網(wǎng)頁使用,有需要的朋友們歡迎前來下載使用
    2017-05-25
  • CSS實現(xiàn)文字高光水波漸變的動態(tài)效果實例

    這篇文章介紹的是用CSS實現(xiàn)文字高光水波漸變的效果,實現(xiàn)后效果很漂亮,對大家日常開發(fā)很有用處,下面小編整理好分享給大家。有需要的可以參考。
    2016-08-29
  • 一款純css3實現(xiàn)的顏色漸變按鈕的代碼教程

    今天給大家分享一款純css3實現(xiàn)的顏色漸變按鈕,這款按鈕的邊框和文字的顏色通過css3實現(xiàn)兩種顏色的漸變,清新淡雅,效果非常好看,需要的朋友可以參考下
    2014-11-12
  • 使用CSS3的背景漸變Text Gradient 創(chuàng)建文字顏色漸變

    使用CSS3 的背景漸變 -webkit-gradient ,用一個背景漸變的 DIV 代替圖片。下面是實現(xiàn)效果示例,相比以上方案優(yōu)點是不使用圖片,減小請求量和流量
    2014-08-19
  • CSS 網(wǎng)頁文字漸變效果

    本文介紹的技術(shù)很經(jīng)典,也算是一篇老文章了,相信很多人也都看過,之前神飛有注意到國內(nèi)有些翻譯,但是不全面,這里我就將其完整的翻譯了一下。
    2009-08-03
  • css實現(xiàn)文字顏色漸變的三種方法

    在web前端開發(fā)過程中,UI設(shè)計師經(jīng)常會設(shè)計一些帶漸變文字的設(shè)計圖,在以前我們只能用png的圖片來代替文字,今天小編給大家?guī)砹薱ss實現(xiàn)文字顏色漸變的三種方法,一起看看
    2018-11-22

最新評論