腾讯 AlloyTeam 的 CSS3 UI库

时间:2013-8-9  |  评论:  |  被查看了 2,577 次  |  标签:, , , , , ,

腾讯 css3 UI 库

里面的Demo值得我们去借鉴,部分基础 Demo 已实现代码编辑以及预览功能,使用起来非常方便:选中一个 Demo,点击“代码编辑器”即可进入代码编辑状态进入编辑,点击“更新预览”即可更新显示。

同时部分 Demo 已支持使用“可视化工具”进行样式调整:选中一个Demo,点击“可视化工具”即进入所见即所得模式,修改左侧参数值,点击“更新预览”即可更新显示。你还可以用任何前端工具复制你想要的CSS3样式、JS代码,或者页面结构。

此库总共分为15大模块,分别是:

1. 动画(ANIMATION)

动画模块主要收集了以CSS3属性为主的一些动画特效,几乎涵盖了CSS3里面所有的动画属性做成的动画特效。

2. 按钮(BUTTON)

按钮模块主要集中了各大主流的按钮样式,以基于圆角、动画为主,使用大量的HTML5和CSS3属性,非常实用。

除了可以看到不同样式的按钮外,你还可以根据以下两个链接去量身定制自己喜爱的按钮:

http://CSS3lib.alloyteam.com/#button/Demo7

http://CSS3lib.alloyteam.com/#button/Demo8

3.CSS3GRADIENT

CSS3GRADIENT是制作渐变背景的CSS3工具,简称CSS3渐变器。通过此工具,你可以获得任何你想要的CSS3渐变颜色代码,并且兼容各大浏览,使你以后制作页面背景颜色更加方便和快速。

4.表单(FORM)

表单模块主要收集了用户登录、注册等各种界面,简单、整洁,用户体验良好,非常实用。

5.图像滤镜(IMAGE_EFFECTS)

图像滤镜模块是此库最庞大的模块之一,里面收集了30多种如何展示图片的Demo。有3D、2D、动画等各种特效,种类多,如果你不知道如何新颖别致的展示一组图片,那么这里面的Demo觉得会让你大饱眼福,茅塞顿开。

6.加载(LOADING)

此模块主要收集了一些常用的基于CSS3和HTML5样式的页面加载动画,还在进一步完善中。

7.导航(MENU_NAV)

此模块也是该库中最庞大的模块之一,里面收集了包含苹果Win7等不同风格和样式的导航条,样式多样,非常值得借鉴。

8.面板(PANEL)

面板的功能主要用于把一些内容放在一些容器中。里面还有面板工具可以让你轻松自定想要的面板样式,并轻松获取设置代码。

9.进度条(PROGRESS_BAR)

进度条模板主要集中了一些常用的进度条展示样式,也是主要基于HTML5、CSS3动画,还在进一步完善中。

10.评分/星级(RATING)

星级评分主要用于用户对一些服务的评价如上图,还在进一步完整中。

11.滚动条(SCROLLBAR)

滚动条模块也主要集中了几种常见的滚动条样式,例如苹果,都是基于HTML5 、CSS3,外表美观,整洁。

12.选项卡(TAB)

选项卡主要用于tab之间的切换,里面提供了不同的选项卡模块,外观简单、整洁,值得借鉴。

13.文本(TEXT)

文本模块主要收集了一些不同字体样式的展现,以供大家参考,方便以后页面的设计。

14.提示(TOOLTIPS)

提示是指针对页面特别词语起到解释或者补充的作用,此库提供了一些常见的提示样式Demo,以供参考。

15.翻页样式(TURNPAGE)

翻页主要模拟翻书的动作,这里收集了几种很友好的交互体验,以供参考。

最后,欢迎大家多多体验,多提意见,更多作品,请访问我们的团队Blog - http://www.AlloyTeam.com

声明:本 CSS3 UI 库部分 Demo 来自互联网,版权归作者所有。

 

DOME

分享: