創意HTML5文字特效 類似翻頁的效果

2022-03-28 18:18:13 字數 3295 閱讀 6198

之前在網上看到一款比較有新意的html5文字特效，文字效果是當滑鼠滑過是出現翻開摺疊的效果，類似書本翻頁。於是我興致勃勃的點開原始碼看了一下，發現其實實現也挺簡單的，主要利用了css3的transform屬性，分別對x軸、y軸、z軸進行翻轉，先看一下效果截圖。

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

我們可以在這裡看到

demo演示效果

接下來我們來看一下原始碼。首先是html**，非常簡單，列出我們需要渲染的文字：

<


div 


class


="foo"


>


<


span 


class


="letter"


data-letter


="a"


>a


span


>


<


span 


class


="letter"


data-letter


="b"


>b


span


>


<


span 


class


="letter"


data-letter


="c"


>c


span


>


<


span 


class


="letter"


data-letter


="d"


>d


span


>


<


span 


class


="letter"


data-letter


="e"


>e


span


>


<


span 


class


="letter"


data-letter


="f"


>f


span


>


<


span 


class


="letter"


data-letter


="g"


>g


span


>


<


span 


class


="letter"


data-letter


="h"


>h


span


>


<


span 


class


="letter"


data-letter


="i"


>i


span


>


<


span 


class


="letter"


data-letter


="l"


>l


span


>


<


span 


class


="letter"


data-letter


="m"


>m


span


>


<


span 


class


="letter"


data-letter


="n"


>n


span


>


<


span 


class


="letter"


data-letter


="o"


>o


span


>


<


span 


class


="letter"


data-letter


="p"


>p


span


>


<


span 


class


="letter"


data-letter


="q"


>q


span


>


<


span 


class


="letter"


data-letter


="r"


>r


span


>


<


span 


class


="letter"


data-letter


="s"


>s


span


>


<


span 


class


="letter"


data-letter


="t"


>t


span


>


<


span 


class


="letter"


data-letter


="u"


>u


span


>


<


span 


class


="letter"


data-letter


="v"


>v


span


>


<


span 


class


="letter"


data-letter


="z"


>z


span


>


div>
接下來是核心css3**，這裡我們略去了控制頁面樣式的css**，把實現翻頁效果文字的css**提取出來。

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

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

.letter:before, .letter:after.letter, .letter:before, .letter:after.letter:before.letter:after.letter:hover:before.letter:hover:after
這裡我們利用了css3的偽類before和after來快速構造兩個相同的字母，然後利用transform屬性的rotatex，rotatey，rotatez來翻轉，再利用skew來時文字傾斜。

由於東西也比較簡單，全是**，沒啥好詳細解說的，有問題請指正，見笑了，呵呵。

創意HTML5文字特效 類似翻頁的效果

原文 創意html5文字特效 類似翻頁的效果 之前在網上看到一款比較有新意的html5文字特效，文字效果是當滑鼠滑過是出現翻開摺疊的效果，類似書本翻頁。於是我興致勃勃的點開原始碼看了一下，發現其實實現也挺簡單的，主要利用了css3的transform屬性，分別對x軸 y軸 z軸進行翻轉，先看一下效果...

html5 文字高亮顯示

實現 1.建立demo.css styles for the fokus demo page.author hakim el hattab selection html,body body aa hover h1,h2 intro intro intro h1 intro h1 after intr...

10大炫酷的HTML5文字動畫特效欣賞

之前我們分享過很多超酷的文字特效，其中也有利用html5和css3的。今天我們要來分享一款基於html5 canvas的文字特效，輸入框中輸入想要展示的文字，回車後即可在canvas上繪製出粒子效果的文字動畫，相當酷的動畫效果。之前我們有分享過一款鏤空效果的css3按鈕，鏤空部分可以定義其他的背景。...