css3文字掃光漸變色

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

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

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

1、

<

style
>
.masked
@-webkit-keyframes masked-animation 
100% 
}style
>
<
div 
class
="masked"
>
<
h1>→css3文字漸變動畫效果 >>
h1>
div>

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

檢索或設定物件中的文字填充顏色，

2、跟第乙個栗子差不多，多給了乙個背景顏色，從區域性到全域性漸變

.slideshine

.slideshine 
@-webkit-keyframes slideshine 
100% 
} @keyframes slideshine 
100% 
}<
p class
="slideshine"
>→css3文字漸變動畫效果 >>
p>

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

.text

.text .mask 
.text .mask i
@keyframes lightline1 
100%
}@-webkit-keyframes lightline1 
100%
}<
div 
class
="text"
style
="margin: 150px auto;"
>
<
img 
src="img/text.png"
/>
<
div 
class
="mask"
><
i>
i>
div>
div>

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

.text2

.text2 .mask 
.text2 .mask i
@keyframes lightline2 
100%
}@-webkit-keyframes lightline2 
100%
}<
div 
class
="text2"
style
="margin: 150px auto;"
>
<
img 
src="img/text3.png"
/>
<
div 
class
="mask"
><
i>
i>
div>
div>

因為單純用第

一、二種方法實現不了多種文字的顏色，他都會被定義的顏色覆蓋，所以如果設定文字多種顏色的話，我就用來代替了，不過可以看出，用遮罩來實現文字漸變彩虹的效果不佳-^-

CSS3漸變色按鈕

下面的展示的是不同的瀏覽器的不同的顯示效果。下面的 是類.button 的一般樣式。為了基於字型大小變化而能自由伸縮，我在填充 padding 和邊界半徑border radius時用了em值。要調整圓角和按鈕的大小，簡單地改變邊界半徑，字型大小和填充值。比如 我可以通過減小字型大小 font si...

CSS3 線性漸變色

linear gradient background color red 瀏覽器不支援的時候顯示 background image linear gradient to right,red,orange,yellow,green,blue,indigo,violet 標準的語法 必須放在最後 引數 ...

CSS3漸變色彩

css3 gradient 分為線性漸變 linear 和徑向漸變 radial 首先來了解下線性漸變的語法 第二個和第三個引數，表示顏色的起始點和結束點，可以有多個顏色值，如 或者是 接下來我們來看一下複雜點的徑向漸變，語法 background radial gradient position ...