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. 网页设计师-林超 - 回复

    诶哟这个不错哦

  2. xia - 回复

    厉害

  3. xia - 回复

    666


{ 发表评论 }