幾個jQuery與CSS3實現的絢麗鼠標懸停效果

11699847034_6b43d779b8_z

只要你有創意,完全可以使用CSS3來實現漂亮的動效,當然如果配合jQuery,這樣會更加強大,實現更多高級絢麗的動畫效果。鼠標hover效果是很常用的,雖然很細微的東西,但網站的細節注定的網站的體驗,所以也不要忽視這些小細節。

今天Designrock整理了幾個使用jQuery與CSS3實現絢麗的鼠標懸停效果,有些是純CSS3的,這些效果你完全可以用在你的網頁上,讓網站獲得更好的體驗。

Animated Opening Type (教學)

漂亮的文字翻開效果,很有意思。

CSS 鼠标hover效果 - 设计达人网

瀏覽網址:http://tympanus.net/codrops/2013/11/14/animated-opening-type/

 

Css3 Hover Effects With Websymbols Tutorial (教學)

CSS 鼠标hover效果 - 设计达人网

瀏覽網址:http://www.freshdesignweb.com/css3-hover-effects-with-websymbols-tutorial.html

 

Original Hover Effects With CSS3 (教學)

超過10種鼠標懸停圖像動畫效果,很酷!

CSS 鼠标hover效果 - 设计达人网

瀏覽網址:http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

 

Simple Icon Hover Effects (教學)

簡單的鼠標懸停效果

CSS 鼠标hover效果 - 设计达人网

瀏覽網址:http://tympanus.net/codrops/2013/05/30/simple-icon-hover-effects/

 

Shape Hover Effect With Svg (教學)

配合SVG實現的懸停動效。

CSS 鼠标hover效果 - 设计达人网

瀏覽網址:http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/

 

Adipoli JQuery Image Hover Plugin (教學)

漂亮的圖像懸停過度效果,多種風格。

CSS 鼠标hover效果 - 设计达人网

瀏覽網址:https://cube3x.com/adipoli-jquery-image-hover-plugin/

 

Flat Folio

CSS 鼠标hover效果 - 设计达人网

瀏覽網址:http://cssdeck.com/labs/flat-portfolio

 

Text Revel On Hover: Corner Triangle Slide Overlay

鼠標經過圖像時,右下角的三角形會自動填滿圖像,並展示簡介。

CSS 鼠标hover效果 - 设计达人网

瀏覽網址:http://codepen.io/davidleininger/details/FuitG

 

Creating A Border Animation Effect With SVG And CSS(教學)

動畫邊框,很不錯!

CSS 鼠标hover效果 - 设计达人网

瀏覽網址:http://tympanus.net/codrops/2014/02/26/creating-a-border-animation-effect-with-svg-and-css/

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s