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

完全CSS 3實現
服務器君一共花費了236.778 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高級程序設計(第2版)》 尼古拉斯·澤卡斯(Nicholas C.Zakas) (作者), 李松峰 (譯者), 曹力 (譯者)

《JavaScript高級程序設計(第2版)》在上一版基礎上進行了大幅度更新和修訂,融入了近幾年來JavaScript應用發展的最新成果,幾乎涵蓋了所有需要理解的重要概念和最新的JavaScript應用成果。從頗具深度的JavaScript語言基礎到作用域(鏈),從引用類型到面向對象編程,從極其靈活的匿名函數到閉包的內部機制,從瀏覽器對象模型(BOM)、文檔對象模型(DOM)到基于事件的Web腳本設計,從XML(E4X)到Ajax及JSON,從高級前端開發技術到前沿的客戶端存儲,從最佳編程實踐到即將成為現實的API,直至JavaScript未來的發展,全景式地展示了JavaScript高級程序設計的方方面面。

更多計算機寶庫...

燃烧吧足球登陆