HTML & CSS ? Radiobox.css 玩轉「單項選擇」動畫！

Radiobox.css 玩轉「單項選擇」動畫！

發表于: HTML & CSS. 評論 (3)
Sponsor

切換開關(checkbox)我們見多了，今天分享一個以單選為主的動畫類樣式庫：Radiobox.css，作用就是為單項選擇添加動畫效果，這樣能為枯燥的頁面增加一點氣氛。

radiobox-css-animations

項目名稱：Radiobox.css
項目地址：https://720kb.github.io/radiobox.css/

動畫演示

這個樣式庫的動畫是使用 Css3 實現，效果看起來還挺有趣的，有彈起來，有轉來轉去，有變形等等，可以根據需要選擇對應的樣式。

radiobox-css

radiobox-css2

Radiobox.css使用教程

使用相當簡單，首先在<head>截入這個 CSS 樣式文件，其它為 radiobox 加入相應動畫的 class 即可。

<input< b="">type="radio" class="radiobox-boing"/>

一共有12款動畫樣式，可根據自己喜好，選擇隨意選擇。樣式有：

Boing
Pump
Hooray
Ufo
Scatman
Vertigo
Flash
Return
Boom
Wheel
Focus
Tremolo

這些動畫是不是挺好玩的？下次做表單時，可以試試這個動畫樣式庫，為頁面增加些小動畫吧^^

達人推薦你看看「11款好看的 Checkbox 切換開關樣式」，兩者搭配使用，雙劍合璧！

推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。
贊助商鏈接

與 、、 相關的文章

贊助商鏈接
設計達人微信交流社區：shejidaren888
喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。
«
»

+ 添加評論3 Responses to “Radiobox.css 玩轉「單項選擇」動畫！”

  1. 網頁設計師-林超 - 回復
    2017 年 01 月 10 日 上午 11:55

    誒喲這個不錯哦

  2. xia - 回復
    2017 年 01 月 09 日 上午 11:35

    厲害

  3. xia - 回復
    2017 年 01 月 09 日 上午 11:34

    666


{ 發表評論 }