JavaScript >> Javascript 文檔 >  >> Tags >> CSS

CSS3 動畫氣泡按鈕

本週我們將利用 CSS3 的多種背景和動畫的強大功能創建一組有用的動畫按鈕。使用此按鈕包,您只需指定類名即可輕鬆將頁面上的任何鏈接轉換為動畫按鈕。不需要 JavaScript。通過分配額外的類名,還可以使用四種顏色主題和三種尺寸。

HTML

要將頁面上的常規鏈接變成精美的動畫 CSS3 按鈕,您只需分配 .button 類和支持的顏色之一。請參閱下面的一些示例:

<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>

有四種顏色等級可供選擇 - 藍色、綠色、橙色和灰色。您看到分配給上面鏈接的其餘類是可選的。您可以從小、中和大中選擇一個尺寸,以及多一個類別 - 圓形,這會創建一個更圓潤的按鈕版本。

選擇類名是為了讓它們簡單易記,但這會增加與您頁面上的某些類發生衝突的可能性。

現在讓我們仔細看看使這成為可能的 CSS 類。

CSS

動畫按鈕的所有 CSS 代碼都位於 buttons.css .這樣可以很容易地將其放入現有項目中並使用它。

請注意,在下面的代碼中,我在許多地方定義了同一屬性的兩個版本。這與瀏覽器處理 CSS 定義的方式有關。他們一一解析規則並應用它們,忽略他們不理解的規則。通過這種方式,我們可以擁有一個所有人都可以理解的普通版本的規則,以及一個啟用 CSS3 的規則,它會被舊版本忽略。

按鈕/buttons.css

.button{
    font:15px Calibri, Arial, sans-serif;

    /* A semi-transparent text shadow */
    text-shadow:1px 1px 0 rgba(255,255,255,0.4);

    /* Overriding the default underline styling of the links */
    text-decoration:none !important;
    white-space:nowrap;

    display:inline-block;
    vertical-align:baseline;
    position:relative;
    cursor:pointer;
    padding:10px 20px;

    background-repeat:no-repeat;

    /* The following two rules are fallbacks, in case
       the browser does not support multiple backgrounds. */

    background-position:bottom left;
    background-image:url('button_bg.png');

    /* CSS3 background positioning property with multiple values. The background
       images themselves are defined in the individual color classes */

    background-position:bottom left, top right, 0 0, 0 0;
    background-clip:border-box;

    /* Applying a default border radius of 8px */

    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;

    /* A 1px highlight inside of the button */

    -moz-box-shadow:0 0 1px #fff inset;
    -webkit-box-shadow:0 0 1px #fff inset;
    box-shadow:0 0 1px #fff inset;

    /* Animating the background positions with CSS3 */
    /* Currently works only in Safari/Chrome */

    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    -o-transition:background-position 1s;
    transition:background-position 1s;
}

.button:hover{

    /* The first rule is a fallback, in case the browser
       does not support multiple backgrounds
    */

    background-position:top left;
    background-position:top left, bottom right, 0 0, 0 0;
}

我們需要做的第一件事是定義按鈕類。這是按鈕的主幹,因為它應用了定位、字體和背景樣式。

首先是與字體相關的樣式,然後是 display 屬性。它設置為 inline-block ,這允許它與周圍的文本位於同一行(就像內聯元素一樣),但在填充和邊距方面也表現得像一個塊。

稍後您將看到,每個按鈕都應用了四個背景圖像。儘管這聽起來很嚇人,但實際上只從服務器請求了一個文件。前兩個背景是氣泡圖的左下角和右上角,如下圖所示,另外兩個是純CSS漸變。

正如我上面提到的,氣泡背景顯示為兩個單獨的圖像,與 background-position 屬性偏移。使用 CSS3 過渡屬性,我們定義了一個動畫,其中兩個版本的背景圖像分別滑到頂部或底部,這會產生您在將鼠標懸停在按鈕上時看到的氣泡效果。

現在讓我們談談大小和舍入類。

/* The three buttons sizes */

.button.big        { font-size:30px;}
.button.medium    { font-size:18px;}
.button.small    { font-size:13px;}

/* A more rounded button */

.button.rounded{
    -moz-border-radius:4em;
    -webkit-border-radius:4em;
    border-radius:4em;
}

這裡是三個大小等級——小、中、大,以及圓形等級。按鈕根據其文本大小進行縮放。這樣就不必指定明確的寬度和高度。

現在讓我們繼續有趣的部分——顏色。下面僅給出藍色按鈕的定義,其餘部分幾乎相同。

/* 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 文件來創建自己的顏色和形狀。


Tutorial JavaScript 教程
  1. 發現 Jest 隱藏功能 Automock

  2. JavaScript 字符串是數字檢查 |示例代碼

  3. 使用 React 和 TypeScript 構建強類型多態組件

  4. 20 個基本的 React 問題可以幫助你學習

  5. 節點 TS 包的樣板文件

  6. 使用值中的列表循環遍歷javascript中的字典

  7. 一次從 Github、Gitlab 和 Bitbucket 閱讀你的簡歷

  1. Javascript 中的代理和反射 |第2部分

  2. JavaScript 測試:Chai(第 1 部分)

  3. 快速響應 JSON

  4. 測試 setTimeout/setInterval

  5. 最常見的javascript字符串函數

  6. 將 $(this) 傳遞給函數

  7. React Hooks,我的介紹

  1. 我創建了一個匿名博客發布 React 應用程序

  2. 每個開發者都應該擁有的 Chrome 擴展

  3. 🤖 我很無聊,所以我做了一個有趣的小推特機器人

  4. 對 Vue 3 組合 API 的思考 - `reactive()` 被認為是有害的