本教程將使用使用css background-clip:text 屬性和CSS3 transitions來制作一些有趣的文字特效。

注意：目前只有webkit內核的瀏覽器才支持css background-clip:text屬性。

HTML結構:

Andreas

在執行動畫時，我們將用jQuery為容器的class添加上it-animate。

EXAMPLE 1

在第一個例子中我們要添加兩個背景圖片。開始的時候我們需要圖片覆蓋整個文字，所以要設置background為100%。在長寬比上，我們只給定了一個值，這意味著圖片將保持原圖片的長寬比。

當我們為文字設置背景圖片吧和background-clip的時候，我們要確定文字的背景色是不是透明的，以確保能看到背景圖片。我們使用rgba為文字設置顏色和透明度。我們還使用了-webkit-text-stroke為文字描上白色的邊。

.it-wrapper h3{

font-size: 320px;

line-height: 188px;

padding: 60px 30px 30px;

color: rgba(67, 201, 117, 0.9);

font-family: 'BebasNeueRegular', Arial, sans-serif;

text-shadow: 10px 10px 2px rgba(0,0,0,0.2);

-webkit-text-stroke: 10px rgba(255,255,255,0.6);

background-color: #fff;

background-repeat: no-repeat;

background-image: url(../images/2.jpg), url(../images/1.jpg);

background-position: 50% 50%;

background-size: 100%;

-webkit-background-clip: text;

/* let's assume that one day it's supported */

-moz-background-clip: text;

background-clip: text;

transition: all 0.5s linear;

/* for now, let's just add some niceness for Firefox */

-moz-border-radius: 30px;

-moz-box-shadow: 0px 0px 1px 8px rgba(67, 201, 117, 0.2);

}

由于執意要webkit內核的瀏覽器才支持background-clip，我們在這里為firefox瀏覽器添加了一些回調。回調中我們放棄了背景圖片，但是添加了一些好看的圓邊和陰影效果。

我們需要制作的文字動畫的樣式如下。

.it-wrapper h3.it-animate{

background-size: 50%;

background-position: 0% 50%, 130% 50%;

color: rgba(242, 208, 20, 0.4);

-moz-box-shadow: 0px 0px 1px 8px rgba(242, 208, 20, 0.4);

}

圖片的background size被減少到50%，并改變背景圖片的位置，以使它從一邊移動到另一邊。

對于firfox瀏覽器我們只需要使它的陰影顏色發生變化。

EXAMPLE 2

在第二個例子中我們使用吧背景顏色漸變效果。

第一個漸變是由許多顏色組成的線性漸變，第二個漸變是由條紋組成的重復線性漸變。

如果你想快速的制作一個漸變，我們建議你使用ColorZilla的在線漸變制作工具。這是一個強大的在線制作各種漸變的工具，如果你使用過photoshop，那么操作它就不再話下了。

這兩種漸變效果的 background size 都要設置為寬度文字寬度的3倍，長度為100%。

.it-wrapper h3{

font-size: 270px;

line-height: 180px;

padding: 30px 30px 40px;

color: rgba(255,255,255,0.1);

font-family: 'Fascinate', 'Arial Narrow', Arial, sans-serif;

text-shadow: 1px 1px 1px rgba(255,255,255,0.3);

background:

linear-gradient(

left,

rgba(105,94,127,0.54) 0%,

rgba(255,92,92,0.57) 15%,

rgba(255,160,17,0.59) 27%,

rgba(252,236,93,0.61) 37%,

rgba(255,229,145,0.63) 46%,

rgba(111,196,173,0.65) 58%,

rgba(106,132,186,0.67) 69%,

rgba(209,119,195,0.69) 79%,

rgba(216,213,125,0.7) 89%,

rgba(216,213,125,0.72) 100%

),

repeating-linear-gradient(

-45deg,

rgba(255,255,255,0.5),

transparent 20px,

rgba(255,255,255,0.3) 40px

);

background-size: 300% 100%;

background-position: center left, top left;

-webkit-background-clip: text;

-moz-background-clip: text;

background-clip: text;

transition: all 1.8s linear;

-moz-border-radius: 90px 15px;

-moz-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.4);

}

對于firfox瀏覽器我們添加一些border radius和一些陰影。

下面是漸變動畫效果。

.it-wrapper h3.it-animate{

background-position: center right, top right;

color: rgba(39,137,149,0.5);

-moz-box-shadow: 0px 0px 0px 10px rgba(39,137,149, 0.9);

}

EXAMPLE 2

在最后一個例子中，我們希望制作一種背景圖片從非常大縮小到100%大小的效果。

.it-wrapper h3{

font-size: 180px;

line-height: 180px;

padding: 20px 30px;

color: rgba(0,80,81,0.7);

-webkit-text-stroke: 2px rgba(0,0,0,0.5);

font-family: 'Gravitas One', 'Arial Narrow', Arial, sans-serif;

text-shadow: 15px 15px 1px rgba(255,255,255,0.3);

background-image: url(../images/3.jpg);

background-repeat: no-repeat;

background-position: center center;

background-size: 400%;

-webkit-background-clip: text;

-moz-background-clip: text;

background-clip: text;

transition: all 0.3s linear;

-moz-box-shadow:

-10px -10px 0px rgba(255,255,255,0.4),

10px 10px 0px rgba(0,81,81,0.4),

0px 0px 50px 50px rgba(255,255,255,0.9) inset;

}

除了background size，我們也使用rgba來為firefox改變透明度和設置一些陰影效果。

.it-wrapper h3.it-animate{

background-size: 100%;

color: rgba(0,80,81,0.1);

-moz-box-shadow:

-20px -20px 0px rgba(255,255,255,0.4),

20px 20px 0px rgba(0,81,81,0.4),

0px 0px 40px 0px rgba(255,255,255,0.4) inset ;

}

本教程就到這里，希望對你有所幫助。

總結

以上是生活随笔為你收集整理的html制作文字效果,使用background-clip属性制作文字特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。