活潑的CSS 3動態氣泡按鈕制作

完全CSS 3實現
服務器君一共花費了162.267 ms進行了5次數據庫查詢,努力地為您提供了這個頁面。
試試閱讀模式?希望聽取您的建議

這一次,我們正在創造一個有用的設置與對CSS3的多重背景和動畫的力量動畫按鈕。通過此按鈕包,您可以很容易地變成一個動畫按鈕,在您的網頁上的任何鏈接只是指定一個類名。沒有必要JavaScript。四色主題和三個大小也可通過分配額外的類名。

要打開網頁上的常規鏈接成一個奇特的動畫CSS3的按鈕,你只需要到指定的按鈕類和支持的顏色之一。請參閱下面的一些例子:

<a href="#" class="button blue big">Download</a>
<a href="#" class="button blue medium">Submit</a>
<a href="#" class="button small blue rounded">Submit</a>

有四種顏色類 – 藍色,綠色,橙色和灰色。其余的類,你看到分配給上面的鏈接,是可選的。您可以選擇從規模小,中,大,一類 – 圓潤,它創建了一個按鈕更加圓潤的版本。

效果演示

推薦使用 Chrome、Firefox等標準瀏覽器查看效果,就是IE 9,也有不兼容的地方。

所有動畫按鈕的CSS代碼駐留在buttons.css。這使得很容易下降到現有的項目,并使用它。

請注意,整個的下面的代碼,我定義了兩個版本在一些地方的同一財產。這與瀏覽器處理CSS定義的方式。他們逐一解析規則,并將其應用,忽略了他們不明白的。這樣我們就可以有一個理解所有的規則,這是普通版,一個CSS3的啟用,將舊的忽視。

我們需要做的第一件事是定義按鈕類。這是按鈕的骨干,因為它適用于定位,字體和背景樣式。

首先是與字體相關的樣式,在這之后如下顯示屬性。它被設置為inline – block的,這使得它能夠坐在其周圍的文本(如內聯元素)的同一行,但也像一個方面的填充和利潤率塊。

在某一時刻,你會看到每個按鈕有四個背景圖像應用到它。雖然這聽起來很嚇人,只有一個文件,實際上是要求從服務器。前兩個背景,左下角和右上角部分泡沫圖像,你可以看到下面的插圖,和其他兩個是純CSS的梯度。

正如我上面提到的的,泡沫的背景是顯示為兩個單獨的圖像,背景位置屬性的偏移。使用CSS3的過渡屬性,我們定義動畫,在這兩個版本的背景圖片幻燈片的頂部或底部恭恭敬敬,你看到懸停按鈕時產生泡沫效應。

/* BlueButton */
 
.blue.button{
    color:#0f4b6d !important;
 
    border:1px solid #84acc3 !important;
 
    /* A fallback background color */
    background-color: #48b5f2;
 
    /* Specifying a version with gradients according to */
 
    background-image:    url('button_bg.png'), url('button_bg.png'),
                        -moz-radial-gradient(    center bottom, circle,
                                                rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
                        -moz-linear-gradient(#4fbbf7, #3faeeb);
 
    background-image:    url('button_bg.png'), url('button_bg.png'),
                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
                                            from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
 
.blue.button:hover{
    background-color:#63c7fe;
 
    background-image:    url('button_bg.png'), url('button_bg.png'),
                        -moz-radial-gradient(    center bottom, circle,
                                           rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
                        -moz-linear-gradient(#63c7fe, #58bef7);
 
    background-image:    url('button_bg.png'), url('button_bg.png'),
                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
                                            from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

每種顏色的類定義了獨特的一套獨特的屬性 – 按鈕的文本標簽的顏色,文字陰影和背景圖像。注意,我們使用的背景屬性按鈕添加多個圖像。他們是分層的頂部,首先出現在上面定義的。

只有Mozilla和Webkit瀏覽器目前支持CSS的梯度,但與完全不同的語法。其余的瀏覽器將顯示回退的背景顏色。您可能已經注意到,我們沒有包括一個免費版本的漸變規則的前綴。這是由于梯度不是一個CSS規范尚未正式的一部分的事實,并沒有首選語法協議。

在上面的片段中,你可以看到,我們定義在它上面的線性漸變和徑向之一。為了使漸變交融,更順利的WebKit和Mozilla的語法,我們定義,這使得外完全透明的漸變顏色的RGBA徑向之一。

有了這個,我們的CSS3動畫泡沫按鈕完成!

總結

這些按鈕是完全基于CSS和整合是非常簡單 – 只是下降的按鈕文件夾在您的項目中的某處。通過修改CSS文件,您可以創建自己的顏色和形狀。

本文地址:http://www.snpmgr.live/librarys/veda/detail/2137,歡迎訪問原出處。

不打個分嗎?

轉載隨意,但請帶上本文地址:

http://www.snpmgr.live/librarys/veda/detail/2137

如果你認為這篇文章值得更多人閱讀,歡迎使用下面的分享功能。
小提示:您可以按快捷鍵 Ctrl + D,或點此 加入收藏。

大家都在看

閱讀一百本計算機著作吧,少年

很多人覺得自己技術進步很慢,學習效率低,我覺得一個重要原因是看的書少了。多少是多呢?起碼得看3、4、5、6米吧。給個具體的數量,那就100本書吧。很多人知識結構不好而且不系統,因為在特定領域有一個足夠量的知識量+足夠良好的知識結構,系統化以后就足以應對大量未曾遇到過的問題。

奉勸自學者:構建特定領域的知識結構體系的路徑中再也沒有比學習該專業的專業課程更好的了。如果我的知識結構體系足以囊括面試官的大部分甚至吞并他的知識結構體系的話,讀到他言語中的一個詞我們就已經知道他要表達什么,我們可以讓他坐“上位”畢竟他是面試官,但是在知識結構體系以及心理上我們就居高臨下。

所以,閱讀一百本計算機著作吧,少年!

《JavaScript DOM編程藝術(第2版)》 基思(Jeremy Keith) (作者), 桑布爾斯(Jeffrey Sambells) (作者), 魏忠 (合著者), 楊濤 (譯者), 王建橋 (譯者), 楊曉云 (譯者), 等 (譯者)

《JavaScript DOM編程藝術(第2版)》內容簡介:JavaScript是Web開發中最重要的一門語言,它強大而優美。無論是桌面開發,還是移動應用。JavaScript都是必須掌握的技術。W3C的DOM標準是開發Web應用的基石。已經得到所有現代瀏覽器的支持,這使得跨平臺Web開發成了一件輕松愜意的事?!禞avaScript DOM編程藝術(第2版)》是超級暢銷書的升級版,由倡導Web標準的領軍人物執筆,揭示了前端開發的真諦,是學習JavaScript和DOM開發的必讀之作。

更多計算機寶庫...

燃烧吧足球登陆 河南麻将游戏下载 秒速飞艇彩票技巧 黑龙江11选5开奖 棒球比分直播荷兰德国 炒股指期货app 真人欢乐捕鱼修改器 多乐彩投注技巧 52大庆麻将下载手机版 安卓下载哈灵麻将 内蒙古快三对照表 浙江十一选五开奖结果走势图 3d试机号3d试机 熊猫麻将代理赚钱吗 股票开户有哪些 四肖中特期期准 幸运赛车怎么玩稳赚