介紹10組基於css3的滑鼠滑過文字動畫特效，有上凸、下凹等文字動畫。這些炫酷的css3文字效果可以讓網頁變得更加絢麗。效果圖如下：
實現的**。
html**：
<css3**：h2 class
="headingouter"
>
push down (shadow effect)
h2>
<
div
class
>
<
a href
=""class
="header header--pushdown header--shadow"
title
="hover me"
>hover me
a>
div>
<
div
class
>
<
a href
=""class
="header header--pushdown header--shadow"
title
="hover me"
>hover me
a>
div>
<
h2 class
="headingouter"
>
raise up (shadow effect)
h2>
<
div
class
>
<
a href
=""class
="header header--raiseup header--shadow"
>hover me
a>
div>
<
div
class
>
<
a href
=""class
="header header--raiseup header--shadow"
>hover me
a>
div>
<
h2 class
="headingouter"
>
push down (merging into page)
h2>
<
div
class
>
<
a href
=""class
="header header--pushdown"
>hover me
a>
div>
<
div
class
>
<
a href
=""class
="header header--pushdown"
>hover me
a>
div>
<
h2 class
="headingouter"
>
raise up (emerging from page)
h2>
<
div
class
>
<
a href
=""class
="header header--raiseup"
>hover me
a>
div>
<
div
class
>
<
a href
=""class
="header header--raiseup"
>hover me
a>
div>
<
h2 class
="headingouter"
>
raised up (emerging from bg) with pattern
h2>
<
div
class
>
<
a href
="#"
class
="header header--raiseup header--svg"
>
<
svg>
<
defs
>
<
lineargradient
id="stripedcolor"
x1="0"
x2="0"
y1="0%"
y2="4%"
spreadmethod
="repeat"
>
<
stop
offset
="0%"
stop-color
="#e62915"
/>
<
stop
offset
="50%"
stop-color
="#e62915"
/>
<
stop
offset
="51%"
stop-color
="#fff"
/>
<
stop
offset
="99%"
stop-color
="#fff"
/>
<
stop
offset
="100%"
stop-color
="#e62915"
/>
lineargradient
>
defs
>
<
text
y="1.2em"
>hover me
text
>
svg>
a>
div>
<
div
class
>
<
a href
="#"
class
="header header--raiseup header--svg"
>
<
svg>
<
defs
>
<
lineargradient
id="striped"
x1="0"
x2="0"
y1="0%"
y2="4%"
spreadmethod
="repeat"
>
<
stop
offset
="0%"
stop-color
="#e62915"
/>
<
stop
offset
="50%"
stop-color
="#e62915"
/>
<
stop
offset
="51%"
stop-color
="#fff"
/>
<
stop
offset
="99%"
stop-color
="#fff"
/>
<
stop
offset
="100%"
stop-color
="#e62915"
/>
lineargradient
>
defs
>
<
text
y="1.2em"
>hover me
text
>
svg>
a>
div>
@charset "utf-8";via：* body h1, h2, h3 h1 h1 a h2 h3 .headingouter .headingouter:first-child h1 + .headingouter .header .header--pushdown .header--pushdown:hover .header--raiseup:hover .header--shadow:hover .header--shadow.header--raiseup:hover .color-bright .color-bright .header .color-bright .header--pushdown .color-bright .header--pushdown:hover .color-bright .header--raiseup:hover svg .header--svg text,
.header--svg stop .header--svg text .header--svg:hover text .header--svg stop .header--svg:hover stop .header--svg:hover stop:nth-child(2), .header--svg:hover stop:nth-child(3) .color-bright .header--svg text .color-bright .header--svg:hover text .color-bright stop .color-bright .header--svg:hover stop:nth-child(2), .color-bright .header--svg:hover stop:nth-child(3)
CSS3 實現2個頁面切換的平滑過渡效果
示例位址 做學習用，1 速度放慢，大家可以看清移動過程，使用時可設定成0.2s 2 為保證 簡潔，只寫了webkit核心的效果，請用chrome開啟檢視。初始狀態 拉開 頁面前後順序顛倒 收起 前後 translate3d translate3d span translate3d b 初始 tran...
前端必須珍藏六個CSS3動效庫
kite是乙個靈活的布局助手css庫，它使用 inline block 而不是最新的css語法，注重實際，易於理解且容易使用。kite用法與flexbox相似 justify content,等等，你可以很輕鬆地建立複雜的模組。kite是基於oocss與mindbemding，它可以幫助您快速構建自...
5個基於css3超炫的滑鼠滑動按鈕動畫
今天給大家分享5個基於css3超炫的滑鼠滑動按鈕動畫。這5個按鈕滑鼠經過的時候有超炫的動畫效果。這5個按鈕適用瀏覽器 360 firefox chrome safari opera 傲遊 搜狗 世界之窗.不支援ie8及以下瀏覽器。效果圖如下 實現的 html div id wrap a href c...