今天主要搜集了一些網(wǎng)頁中文字用css3制作的特效，并親自嘗試了一下，現(xiàn)把關(guān)鍵的代碼和效果貼出來與同學(xué)們一起分享，希望能對大家在平時(shí)的制作中有所幫助。廢話不說，直接進(jìn)入效果的制作，感興趣的同學(xué)跟著我的代碼制作一次，你肯定會(huì)有不少的收獲。

Inset Text(內(nèi)陰影效果)

內(nèi)陰影的文字效果是利用text-shadow屬性根據(jù)不同光源制作出來的。需要注意三個(gè)顏色的配置問題，背景色，前景色，陰影色需要采用有一定的亮度對比色，這樣效果更佳，請看下面的效果。

.insetText h2{color: #f00;text-shadow: 1px 1px 0px #212121;}

效果如下所示：

text-shadow的使用請點(diǎn)這里。

3D Text(3D立體效果)

3D文字效果，在《CSS3的文字陰影—text-shadow》有詳細(xì)介紹，這里沒有使用其他的html標(biāo)簽，只是多次應(yīng)用了CSS3中的text-shadow屬性，進(jìn)行多次陰影設(shè)置，并設(shè)置不同的陰影色，從而達(dá)到一個(gè)立體的文字效果。

.text3D h2 {color: #fff;text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25);}

效果如下所示：

Neon Lights Effect(霓虹燈效果)

霓虹燈效果主要是多次使用text-shadow屬性制作陰影，只是這里有一點(diǎn)需要注意，在制作陰影時(shí)不設(shè)置任何X軸和Y軸的值，只是設(shè)置其模糊半徑值，并且每次的blur半徑取值不同，而且后面的值總是比前面的值大。

.neonText h2 {color: #fff;text-shadow:0 0 5px #CCCCCC, 0 0 10px #CCCCCC, 0 0 15px #CCCCCC, 0 0 20px #095816, 0 0 25px #095816, 0 0 30px #095816, 0 0 50px #095816, 0 0 80px #095816, 0 0 100px #095816, 0 0 150px #095816}

效果如下所示：

Letterpress Effect (凸版效果)

Letterpress Effect和前面的Inset Effect效果很相似，不同之處是Lefferpress使用模糊值產(chǎn)生一種立體效果。這種效果一般配合在有紋理的背景下使用。

.letterpressText h2 {color: #222;text-shadow: 0px 2px 3px #555;}

效果如下所示：

Text Embossing(浮雕效果)

浮雕效果我們在這里分兩種效果，其中一種是背景色是暗色，前景色是亮色，另一種是背景色是亮色，而前景色是暗色，下面我們先來看第一種：

.embossing h2 {color: #FFFFFF;text-shadow: 0 -1px 0 #374683;}

效果如下所示：

第二種，背景色為亮色，前景色為暗色：

.embossingTwo h2 {color: #737373;text-shadow: 0px 1px 0px #e5e5ee; }

效果如下所示：

Stroke Effect(描邊效果)

在webkit內(nèi)核的瀏覽器中我們可以使用text-stroke來制作文字描邊或抽空的效果。

.stroke h2 {color: #c00; -webkit-text-stroke: 1px #000; }

效果如下所示：

上面這種效果，在Firefox下可以模擬上面的效果

color: #c00; text-shadow: 1px 1px 0 #000,-1px -1px 0 #000;

在webkit還有一個(gè)text-fill-color制作一種抽空文字的效果

.strokeTransparent h2 {-webkit-text-stroke: 1px #000;-webkit-text-fill-color: transparent; }

效果如下所示：

Anaglyphic effect(補(bǔ)色3D效果)

Anaglyphic text effect是一種制作透明度疊加的效果，非常類似于浮雕立體的三維效果圖像，實(shí)現(xiàn)這種辦法主要是使用前景色透明度（rgba）和陰影，如：

.anaglyphic h2 {color: rgba(255, 100, 140,0.5);text-shadow: 3px 3px 0 rgba(80,255,0,0.8); }

效果如下所示：

有關(guān)于CSS3的RGBA應(yīng)用可以點(diǎn)擊這里。

Rotate Text(旋轉(zhuǎn)文本)

旋轉(zhuǎn)文本主要使用的是transform中的rotate屬性來改變文本的方向，從而達(dá)到一種旋轉(zhuǎn)文本的效果，具體實(shí)現(xiàn)代碼如下：

.rotate h2 {-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

效果如下所示：

有關(guān)于transform更詳細(xì)的介紹請點(diǎn)這里。

Emboss Effect(浮雕效果)

采用上下不同色調(diào)，亮色為上，暗色為下，制作出浮雕效果：

.emboss h2 {color: #ccc;text-shadow: -1px -1px #fff, 1px 1px #333; }

效果如下所示：

Blury Effect(模糊效果)

模糊效果是將前景色設(shè)置為透明，然后給其加上text-shadow，并只進(jìn)行模糊度的設(shè)置：

.blury h2 {color: transparent;text-shadow: 0 0 4px #f36; }

效果如下所示：

Background-clip:text(圖片填充文字)

在webkit內(nèi)核的瀏覽器下，使用background-clip:text可以制作出用背景圖片填充文本的效果：

.backgroundClip h2 {background:url("backgroundImage.png") no-repeat left top;-webkit-background-clip: text;-webkit-text-fill-color: transparent; }

效果如下所示：

有關(guān)于更多的background-clip資料，大家可以點(diǎn)擊這里查閱。

True Inset Effect

把inset效果和圖片填充文字效果結(jié)合在一起，我們就可以制作出真正的插圖文字效果，只可惜的是，現(xiàn)在支持這種效果的只有Chrome和Safari（也就是說只有Webkit內(nèi)核）瀏覽器支持，下面看其實(shí)現(xiàn)代碼：

.trueInset h2 {background: #666;-webkit-background-clip: text;-moz-background-clip: text;background-clip: text;color: transparent;text-shadow: 0 3px 3px rgba(255,255,255,0.5); }

效果如下所示：

紋理文字

紋理文字效果是依靠一張圖片，配合其他文字效果制作出來，其原理來源于webkit-mask-image，把圖片當(dāng)作一個(gè)遮罩，疊合文字，先看其html結(jié)構(gòu)：

<h2 class="grunge">Grunge Effect <span></span></h2>

紋理圖片如下所示：

加上樣式：

h2.grunge {position:relative;color: #f06369;background: #000;text-shadow: 0 0 2px rgba(255,255,255,0.3), -1px -1px 0 #fcfcfc, 1px 1px 0 #ccc; }h2.grunge span{position:absolute;display:block;top:0;left:0;height:100%;width:100%;background:url("images/ground.png"); }

效果如下所示：

這里有一點(diǎn)需要特別提出，h2背景色需要和圖片顏色接近，從成造成一種假像(我一開始就吃了這個(gè)虧，沒有設(shè)置好背景色)。給人視覺效果就是背景圖片 填充到文本中去了。同時(shí)也可以使用這種方法來制作文字的漸變效果，但需要注意的是圖片的漸變色需要配合好文字的背景色。有關(guān)于這方面的解決大家可以看看 nickla寫的《CSS Gradient Text Effect》。更多的相關(guān)DEMO的制作可以拼命點(diǎn)這里。

Gradient Effect

文字漸變效果是使用webkit-mask-image來制作，但這種效果只有Chrome和Safari支持。

html:

<h1><a href="#">Gradient Effect</a></h1>

css:

h1 {position: relative;text-shadow: 1px 0 4px #006;font-family: Airal; } h1 a {position: absolute;top: 0; z-index: 2;color: #f36902;-webkit-mask-image: -webkit-gradient(linear, left top,left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));text-descoration: none; } h1:after {content: "Gradient Effect";color: #000;text-shadow: 1px 1px 1px #600; }

效果如下所示：

轉(zhuǎn)載于:https://www.cnblogs.com/shimily/articles/3914046.html

總結(jié)

以上是生活随笔為你收集整理的CSS3制作文字特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。