成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css3文字顏色動(dòng)態(tài)漸變

Cciradih / 1461人閱讀

摘要：是因?yàn)閯?dòng)畫的結(jié)束后的最后一幀的顏色為，立馬會(huì)重新執(zhí)行動(dòng)畫，顏色會(huì)初始到第一幀，所以會(huì)有明顯的變化。的效果就是背景顏色被剪裁到文字上面，只有文字會(huì)顯示背景顏色。用數(shù)字表達(dá)結(jié)合以上三個(gè)屬性結(jié)合動(dòng)畫，最終實(shí)現(xiàn)文字漸變的效果。

瀏覽 Animate.css官網(wǎng) 的時(shí)候發(fā)現(xiàn)Animate.css這幾個(gè)字母的顏色會(huì)慢慢變化，個(gè)人覺(jué)得還是很有意思，本以為是利用animate 改變color,結(jié)果F12后發(fā)現(xiàn)好多奇怪的css屬性。

先來(lái)看看我的實(shí)現(xiàn)方法

簡(jiǎn)易實(shí)現(xiàn)方法 
h2{
    height: 60px;
    color: #f35626;
    -webkit-animation: hue 6s infinite linear;
}
@-webkit-keyframes hue {
    from {
        color: #f35626;
    }
    to {
        color: #feab3a;
    }
}

通過(guò)通過(guò)css3的動(dòng)畫屬性可以輕松改變文字的顏色，但是這里有一個(gè)小問(wèn)題，就是動(dòng)畫執(zhí)行一個(gè)輪回結(jié)束后，顏色有一個(gè)明顯變化過(guò)程。是因?yàn)閯?dòng)畫的結(jié)束后的最后一幀的顏色為#feab3a，立馬會(huì)重新執(zhí)行動(dòng)畫，顏色會(huì)初始到第一幀#f35626，所以會(huì)有明顯的變化。我們稍微改變一下動(dòng)畫的寫法。

@-webkit-keyframes hue {
    0%{
        color: #f35626;
    }
    50% {
        color: #feab3a;
    }
    100%{
        color: #f35626;
    }
}

這樣開始和結(jié)束都是同樣的顏色，動(dòng)畫輪回顏色就不會(huì)突變了。

Animate.css寫法

先看看Animate的寫法

h2{
    height: 60px;
    color: #f35626;
    background: coral;
    background-image: -webkit-linear-gradient(45deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 6s infinite linear;
}
@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg);
    }
    to {
        -webkit-filter: hue-rotate(-360deg);
    }
}

linear-gradient線性漸變，以前是用到過(guò)，但是background-clip, text-fill-color, -webkit-filter: hue-rotate,這些屬性感覺(jué)好陌生，查閱相關(guān)資料后才進(jìn)一步認(rèn)識(shí)這些屬性，下面一步步來(lái)了解這些屬性吧。

background-clip

text-fill-color

filter: hue-rotate

background-clip 
CSS3 屬性 規(guī)定背景的繪制區(qū)域 W3school上面只展示了三個(gè)值 CSS3 background-clip 屬性

border-box       # 背景被裁剪到邊框盒。
padding-box       # 背景被裁剪到內(nèi)邊距框。
content-box       # 背景被裁剪到內(nèi)容框。

上面用到的-webkit-background-clip: text; 必須加上-webkit-前綴，不然瀏覽器不能正常渲染。text的效果就是背景顏色被剪裁到文字上面，只有文字會(huì)顯示背景顏色。這個(gè)屬性可以做類似ktv里面歌詞視圖的效果。具體效果參考 犀利的background-clip:text，實(shí)現(xiàn)K歌字幕效果

text-fill-color

text-fill-color,表示文字顏色填充，實(shí)現(xiàn)的效果基本上與color一樣，會(huì)覆蓋color所定義的字體顏色.也支持一個(gè)transparent屬性，也就是透明填充。

filter: hue-rotate

hue-rotate用來(lái)設(shè)置對(duì)象的色相旋轉(zhuǎn)。用0-360數(shù)字表達(dá)

結(jié)合以上三個(gè)屬性結(jié)合動(dòng)畫，最終實(shí)現(xiàn)文字漸變的效果。

透明度漸變 
.maskImage {
  color: red;
  height: 600px;
  //background: black;
  -webkit-mask-image: -webkit-gradient(linear,center top,center bottom,color-stop(0,transparent),color-stop(.3,#000),color-stop(1,#000));
  }
總結(jié)

隨著對(duì)CSS3越發(fā)的了解，深深的感受到CSS3的潛力越來(lái)越大，配合css3能夠輕松實(shí)現(xiàn)各種酷炫效果。當(dāng)然瀏覽器兼容是個(gè)大問(wèn)題。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112807.html

相關(guān)文章

  • css3整理

    W3C的CSS3規(guī)范仍在開發(fā)，但是，許多新的CSS3屬性已在現(xiàn)代瀏覽器使用 CSS3邊框 border-radius border-top-left-radius: 2em 0.5em box-shadow:x-shadow y-shadow blur spread(陰影尺寸，可選) color inset(outset外部陰影，可選) border-image border-im...

    X1nFLY 評(píng)論0 收藏0

  • css3重要語(yǔ)法匯總

    摘要：屬性指定了列與列間的邊框樣式屬性指定了兩列的邊框厚度屬性指定了兩列的邊框顏色屬性是所有屬性的簡(jiǎn)寫。屬性指定了列的寬度。多媒體查詢代碼除那些設(shè)備特定的媒體類型代碼 線性漸變 linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet)linear-gradient(指定漸變方向, 顏色的起點(diǎn)，顏色的結(jié)束) 文本...

    zhiwei 評(píng)論0 收藏0

  • css3

    css3新增選擇器 屬性選擇器 包括h5中新增的自定義屬性 p[data-id]{color: red} sasas 屬性選擇器可以指定屬性值 的樣式變化 E[attr=value] 指定屬性名 p[data-id=111]{color: red} sasas1 sasas2 sasas3 只有第一行才會(huì)...

    RancherLabs 評(píng)論0 收藏0

  • CSS3主要內(nèi)容

    摘要：必須要準(zhǔn)確的放置否則聲明無(wú)效。倒影設(shè)置元素的倒影準(zhǔn)確的來(lái)說(shuō)不能算是的東西，但需要知道。默認(rèn)值不可繼承背景漸變漸變是在中新增加的圖片類型使用漸變可以在兩種顏色間制造出平滑的漸變效果用它代替圖片，可以加快頁(yè)面的載入時(shí)間減小帶寬占用。 CSS3主要內(nèi)容 一、CSS選擇器 ? CSS3選擇器規(guī)范地址： https://www.w3.org/TR/2011/RE...? ...

    X_AirDu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<