8款超酷而實用的CSS3按鈕動畫

edithfang發表於2014-07-02

很久沒有向大家分享關於CSS3按鈕的動畫特效了,今天就給大家帶來8款超酷而實用的CSS3按鈕動畫,由於google字型服務被遮蔽的緣故,所以你在截圖上看到的字型和實際演示會有所差異。一起來看看這些CSS3按鈕吧。

1、CSS3分享按鈕動畫特效

這是一款基於CSS3的社會化分享按鈕,按鈕非常簡單,提供了分享到twitter、facebook、youtube等大型社交網站。每一個分享按鈕都有個大社交網站的Logo圖示,並且在滑鼠滑過這些按鈕時,利用CSS3的動畫特性出現滑動的動畫效果。

css3-share-button-animation



線上演示 原始碼下載

2、HTML5/CSS3懸浮按鈕特效Canvas綵球飛舞效果

這次要分享一個非常具有動畫色彩的CSS3按鈕,按鈕的外觀比較一般,但它有兩個特別的地方:一、按鈕懸浮,整個按鈕看上去像是懸浮在半空中一樣,很立體;二、點選按鈕時利用HTML5 Canvas繪製綵球飛舞的效果,非常炫酷。

html5-css3-canvas-button



線上演示 原始碼下載

3、純CSS3實現發光動畫按鈕特效

這是一款基於純CSS3的發光按鈕,按鈕發光的顏色是隨機的,這樣一排按鈕就顯得五彩繽紛,非常絢麗。之前我們也介紹過不少樣式很獨特的CSS3按鈕,比如純CSS3 3D開關按鈕純CSS3實現動感彈性按鈕等,都非常不錯,也有HTML5動畫按鈕,大家可以自己看看。

pure-css3-shine-button



線上演示 原始碼下載

4、純CSS3動畫按鈕 可左右滑動

利用CSS3的一些動畫屬性,我們可以讓一些平凡的按鈕變得生動有趣,提高使用者體驗。今天分享的這款CSS3動畫按鈕就非常特別,只要你用滑鼠滑過按鈕,按鈕的背景就會出現一個很可愛的滑塊背景,這個滑塊背景可以左右滑動,滑鼠移出按鈕時,又會將滑塊移出,看下面的按鈕演示,非常動感。

css3-slide-button-animation



線上演示 原始碼下載

5、純CSS3背景漸變按鈕 按鈕圖示淡入淡出動畫

今天我們要再來分享一款純CSS3實現的按鈕動畫,這款按鈕動畫有以下特點:當滑鼠滑過按鈕時,按鈕上的小圖示便會以爆炸的方式淡出按鈕,取代它的時相應的文字,當滑鼠離開按鈕時,小圖示又會以爆炸的方式淡入按鈕中。更多CSS3按鈕,我們可以在CSS3按鈕欄目中查詢。

css3-icon-animation-button



線上演示 原始碼下載

6、純CSS3實現動感彈性按鈕

今天我們來分享一款很有意思的CSS3按鈕,當你把滑鼠滑過按鈕時,整個按鈕就會全身扭動起來,像是有彈性一樣,非常動感。另外,按鈕的結構非常簡單,你可以通過合適的配色,讓按鈕更加貼切你的網站,最後推薦另外一款CSS3按鈕:CSS3多樣式小圖示按鈕 帶分享按鈕

css3-gelatin-button



線上演示 原始碼下載

7、CSS3圓角動畫按鈕 按鈕顏色豐富

前面剛剛分享過一款CSS3實現的分享按鈕,非常簡單實用。現在在來分享一款CSS3按鈕,首先這款CSS3按鈕是圓角的,正常情況下有著不同顏色的邊框線,按鈕是空心的,滑鼠滑過按鈕時,按鈕即以淡入的效果填充背景色,滑鼠移出時又以淡出的效果取消背景色,是一款簡單而又實用的CSS3按鈕。

css3-ghost-buttons



線上演示 原始碼下載

8、CSS3 3D彈性按鈕效果 帶彈性質感

之前我們分享過一款非常酷的純CSS3 3D按鈕按鈕酷似牛奶般剔透,這款按鈕的特點有二:牛奶般的立體外觀,按鈕按下時非常柔和的彈性效果。今天要分享的這款CSS3按鈕和這款按鈕差不錯,也同樣擁有3D的效果,按鈕在按下時帶有彈性質感。

css3-3d-reakustuc-button



線上演示 原始碼下載

以上就是8款超酷而實用的CSS3按鈕動畫,歡迎收藏分享。
評論(0)

相關文章