在线高清,午夜三级在线,日日天天

之前在網上看到一款比較有新意的HTML5文字特效，文字效果是當鼠標滑過是出現翻開折疊的效果，類似書本翻頁。于是我興致勃勃的點開源碼看了一下，發現其實實現也挺簡單的，主要利用了CSS3的transform屬性，分別對X軸、Y軸、Z軸進行翻轉，先看一下效果截圖。

看效果圖這些文字是不是很有立體的感覺，而這個立體的感覺并不是有投影和陰影來實現的，而是通過翻轉。

DEMO演示效果

接下來我們來看一下源碼。首先是HTML代碼，非常簡單，列出我們需要渲染的文字：

<div class="foo">
A
B
C
D
E
F
G
H
I
L
M
N
O
P
Q
R
S
T
U
V
Z
</div>

復制代碼

接下來是核心CSS3代碼，這里我們略去了控制頁面樣式的CSS代碼，把實現翻頁效果文字的CSS代碼提取出來。

.letter{
display: inline-block;
font-weight: 900;
font-size: 8em;
margin: 0.2em;
position: relative;
color: #00B4F1;
transform-style: preserve-3d;
perspective: 400;
z-index: 1;
}

復制代碼

這樣我們就讓這些字母安安靜靜的排列起來，并有了自己的背景顏色，等待強大的CSS3來渲染。

接下來我們要讓文字在鼠標滑過的時候產生翻轉傾斜的動畫。

.letter:before, .letter:after{
position:absolute;
content: attr(data-letter);
transform-origin: top left;
top:0;
left:0;
}
.letter, .letter:before, .letter:after{
transition: all 0.3s ease-in-out;
}
.letter:before{
color: #fff;
text-shadow:
-1px 0px 1px rgba(255,255,255,.8),
1px 0px 1px rgba(0,0,0,.8);
z-index: 3;
transform:
rotateX(0deg)
rotateY(-15deg)
rotateZ(0deg);
}
.letter:after{
color: rgba(0,0,0,.11);
z-index:2;
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(0deg)
rotateZ(0deg)
skew(0deg,1deg);
}
.letter:hover:before{
color: #fafafa;
transform:
rotateX(0deg)
rotateY(-40deg)
rotateZ(0deg);
}
.letter:hover:after{
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(40deg)
rotateZ(0deg)
skew(0deg,22deg);
}
復制代碼

復制代碼

這里我們利用了CSS3的偽類before和after來快速構造兩個相同的字母，然后利用transform屬性的rotateX，rotateY，rotateZ來翻轉，再利用skew來時文字傾斜。

轉自：http://www.cnblogs.com/html5tricks/p/3653672.html

【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。

pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

簡單做出HTML5翻頁效果文字特效

相關文檔推薦