纯CSS3实现Material Design效果
发布时间：2017-03-09 15:52:53 作者：seasonley 
我要评论
我要评论本篇文章主要介绍了纯CSS3实现Material Design效果。是对原生组件基于标签属性做了美化，具有一定的参考价值，有兴趣的可以了解一下。
预览
这是一个正在完善的css文件，是对原生组件基于标签属性做了美化，对datepicker,select等无法用css实现的暂不考虑在本文内。
按钮 Button
初始按钮
<button>button</button>
<button class="red">red</button>
<button class="orange">orange</button>
<button class="blue">blue</button>
<button class="green">green</button>
<button class="link">link</button>
描边按钮
<button class="b-red bk-n">button</button>
<button class="b-red">red</button>
<button class="b-orange">orange</button>
<button class="b-blue">blue</button>
<button class="b-green">green</button>
禁用按钮
<button disabled>disabled</button>
上浮按钮
<button class="circle">+</button>
<button class="circle teal">+</button>
按钮组
<nav class="btn-group">
<button>button</button>
<button>button</button>
<button>button</button>
</nav>
表单Form
文本输入
<input type="text"> <input type="password" >
开关
<input type="checkbox" id="switch1" class="switch"><label for="switch1"></label>
单选
<input type="radio" id="test_radio1" name="ra"><label for="test_radio1">radio1</label> <input type="radio" disabled id="test_radio3" name="ra"><label for="test_radio3">radio3</label> <input type="radio" checked disabled id="test_radio4" name="ras"><label for="test_radio4">radio4</label>
多选
<input id="test_checkbox1" type="checkbox"><label for="test_checkbox1">check1</label> <input id="test_checkbox3" disabled type="checkbox"><label for="test_checkbox3">check3</label> <input id="test_checkbox4" checked disabled type="checkbox"><label for="test_checkbox4">check4</label>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
使用CSS3 制作一个material-design 风格登录界面实例
这篇文章主要介绍了使用CSS3 制作一个material-design 风格登录界面实例 ，具有一定的参考价值，有需要的可以了解一下。2016-12-12
material-floating-button是一款使用纯Js制作的Material design风格浮动按钮特效，提供4种动画特效，欢迎下载2016-11-14
纯JS实现Material Design风格按钮点击波特效源码
这是一套使用纯js制作的炫酷Material Design风格按钮点击波特效的代码，按钮点击变色，运行速度快，效果非常炫酷2016-10-27
Material Design 统一 Android Chrome 平台的全新设计语言 中文PDF版 7
Google I/O 2014 发布的 Material Design 将会成为统一 Android Mobile， Android Table, Desktop 等平台的设计语言规范，对从业人员意义重大，感兴趣的朋友可以过来看看2016-09-23
基于jQuery Bootstrap的Material Design风格表单特效源码
Jquery Material Form Plugin是一个基于Bootstrap的Material Design风格的jQuery表单插件特效，可表单修改为扁平风格的表单等效果2016-04-15
jQuery移动触摸的Material Design风格点击波特效源码
源码是一款可以在移动触摸设备和桌面设备上使用的Material Design风格点击波特效jQuery插件rippleria的代码。它支持按钮、图片2016-01-05
基于HTML5 audio的Material design风格音频播放器特效源码
这是一款基于HTML5 audio的Material design风格音频播放器jQuery插件的特效源码。该音频播放器可以设置音频播放列表，欢迎下载2015-11-26
纯CSS3实现简洁Material Design风格用户登录界面特效源码
这是一款非常漂亮的Material Design风格用户登录界面设计效果的代码。该登录界面采用扁平风格，使用纯CSS3来完成2015-10-22- 今天为大家带来一篇material design 文档动画的学习笔记，作者是大E，加错很不错，一起来看看吧2015-05-20
最新评论