不断更新中

预览

这是一个正在完善的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>

部分样式

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {display: block
}audio,
canvas,
progress,
video {display: inline-block;vertical-align: baseline
}audio:not([controls]) {display: none;height: 0
}[hidden],
template {display: none
}li {list-style: none
}a {background-color: transparent
}a:active,
a:hover {outline: 0
}abbr[title] {border-bottom: 1px dotted
}b,
strong {font-weight: 700
}dfn {font-style: italic
}h1 {font-size: 2em;margin: .67em 0
}mark {background: #ff0;color: #000
}small {font-size: 80%
}sub,
sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline
}sup {top: -.5em
}sub {bottom: -.25em
}img {border: 0
}svg:not(:root) {overflow: hidden
}figure {margin: 1em 40px
}hr {box-sizing: content-box;height: 0
}pre {overflow: auto
}code,
kbd,
pre,
samp {font-family: monospace, monospace;font-size: 1em
}button,
input,
optgroup,
select,
textarea {color: inherit;font: inherit;margin: 0
}button {overflow: visible
}button,
select {text-transform: none
}button,
html input[type=button],
input[type=reset],
input[type=submit] {-webkit-appearance: button;cursor: pointer
}button[disabled],
html input[disabled] {cursor: default
}button::-moz-focus-inner,
input::-moz-focus-inner {border: 0;padding: 0
}input {line-height: normal
}input[type=checkbox],
input[type=radio] {box-sizing: border-box;padding: 0
}input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {height: auto
}input[type=search] {-webkit-appearance: textfield;box-sizing: content-box
}input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {-webkit-appearance: none
}fieldset {border: 1px solid silver;margin: 0 2px;padding: .35em .625em .75em
}legend {border: 0;padding: 0
}textarea {overflow: auto
}optgroup {font-weight: 700
}table {border-collapse: collapse;border-spacing: 0
}td,
th {padding: 0
}/*html*/
html {font-family: sans-serif;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%
}
/*body*/
body{margin: 0;background-color: rgb(238,238,238);font-size:16px;padding: 20px;-webkit-box-sizing: border-box;box-sizing: border-box;font-family: "Microsoft YaHei";color:#333;text-shadow: 0 0 0.1px rgba(0,0,0,0.2);
}
/*button*/button {opacity: 0.9;line-height: 1rem;padding:  0.5rem 1rem;border: none;outline: none;background-color: white;text-decoration: none;position: relative;border-radius:2px;box-shadow:0 1px 3px darkgray;transition: box-shadow 0.5s ease-out;}button::before{content: '';display:block;position: absolute;left: 50%;top: 50%;border-radius: 10%/40%;-webkit-transform: translate(-50%, -50%) ;transform: translate(-50%, -50%) ;height: 100%;width: 100%;z-index: -1;-webkit-transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);}button:hover{box-shadow:0 6px 16px darkgray;transition: all 0.8s ease-out;}
button:active{opacity: 1;-webkit-transition: all 0.5s ease-out;transition: all 0.3s ease-out;
}button:active::before{width: 0;height: 100%;border-radius: 0;background-color: rgba(0,0,0,.4);-webkit-transition: all 0.01s ease-out;transition: all 0.01s ease-out;}
button.link{background:none;color:#0275d8;box-shadow: none;
}
button[disabled]{background-color:lightgray;color:darkgray;cursor:not-allowed;box-shadow: none;
}
.circle{border-radius: 100%;
}
button.circle{padding: 0;width: 3rem;height: 3rem;font-size: 1.5rem;box-shadow:0 6px 12px darkgray;}
button.circle:hover{box-shadow:0 12px 24px darkgray;
}button.circle::before{content: '';display:block;position: absolute;left: 50%;top: 50%;border-radius: 100%;-webkit-transform: translate(-50%, -50%) ;transform: translate(-50%, -50%) ;height: 100%;width: 100%;z-index: -1;-webkit-transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);}button.circle:active::before{width: 0;height: 0;border-radius: 100%;background-color: rgba(0,0,0,.4);-webkit-transition: all 0.01s ease-out;transition: all 0.01s ease-out;}/*form*/
input[type=text],
input[type=password],
input[type=number]{padding: 0;border:none;text-indent: 0.5em;background: none;outline: none;border-bottom:2px solid #555;line-height: 32px;height: 32px;box-sizing: border-box;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus{border-bottom-color: rgb(0,150,136);color: rgb(0,150,136);
}
input[type=checkbox],input[type=radio]{display: none;
}
input[type=checkbox]+label,input[type=radio]+label{    line-height: 1em;text-indent: 1.2em;width: 1em;height: 1em;margin: 0.2em 0.1em;border: 2px solid #555;border-radius: 2px;padding: 0px;display: inline-block;position: relative;cursor: pointer;
}
input[type=radio]+label{border-radius: 1em;
}
input[type=checkbox]:checked+label,input[type=radio]:checked+label{border-color:  rgb(0,150,136);
}input[type=checkbox]:checked + label:after{content: '';display: block;width: 0.7em;height: 0.3em;margin: 0.2em 0.1em;top: 0;left: 0;transform:rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);position: absolute;border-left: 0.15em solid rgb(238,238,238);border-bottom: 0.15em solid rgb(238,238,238);
}
input[type=radio]:checked + label{background: rgb(0,150,136);box-shadow: 0 0 0 3px rgb(238,238,238) inset;
}input[type=checkbox] + label:before,input[type=radio] + label:before{content: '';display:block;position: absolute;left: 50%;top: 50%;border-radius: 100%;-webkit-transform: translate(-50%, -50%) ;transform: translate(-50%, -50%) ;height: 4em;width: 4em;z-index: -1;-webkit-transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);}input[type=checkbox]+ label:active::before,input[type=radio]+ label:active::before{width: 0;height: 0;border-radius: 100%;background-color: rgb(0,150,136);-webkit-transition: all 0.01s ease-out;transition: all 0.01s ease-out;}input[type=checkbox]:checked+ label:active::before,input[type=radio]:checked+ label:active::before{background-color: gray;}input[type=checkbox]:checked + label,input[type=radio]:checked + label {background-color: rgb(0,150,136);color: rgb(0,150,136);
}input[type=checkbox] + label:active, input[type=checkbox]:checked + label:active,input[type=radio] + label:active, input[type=radio]:checked + label:active {background-color:  rgb(0,150,136);
}input[type=checkbox]:disabled + label, input[type=radio]:disabled + label{border-color:lightgray;color:lightgray;background-color: lightgray;pointer-events: none;}input[type=checkbox].switch+label{left :0;border-radius: 1em;border-color:gray;}input[type=checkbox]:checked.switch+label{left:1.5em;border-color:rgb(0,150,136); }input[type=checkbox].switch+label:after{content: "";position: absolute;display: block;margin-top: 50%;border-bottom: 2px solid lightgray;width: 1.4em;height: 0;transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);margin-left :1.1em;}input[type=checkbox]:checked.switch+label:after{border-bottom: 2px solid rgb(0,150,136); margin-left :-1.1em;}nav.btn-group{border-radius: 2px;overflow: hidden;float: left;
}nav.btn-group button{float: left;border-radius: 0;box-shadow: none;}nav.btn-group button:hover{box-shadow: none;}nav.btn-group button:hover::after{content: "";display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0, 0, 0, 0.11);
}nav.menu{height: 3rem;padding: 0 1em;background: white;
}
nav.menu>ul{padding: 0 1em;margin:0;line-height: 3rem;float: left;
}
mav.menu>ul>li{display: block;}.b-red{border: 1px solid #d9534f;color:#d9534f;}
.b-orange{border: 1px solid #ec971f;color:#ec971f;}
.b-blue{border: 1px solid #5CA3DE;color:#5CA3DE;}
.b-green{border: 1px solid #71CA71;color:#71CA71;}
.b-navy { border: 1px solid  #001f3f;color: #001f3f;}
.b-aqua { border: 1px solid  #7fdbff;color: #7fdbff;}
.b-teal { border: 1px solid  rgb(0,150,136);color: rgb(0,150,136);}
.b-olive { border: 1px solid  #3d9970;color: #3d9970;}
.b-lime { border: 1px solid  #01ff70;color: #01ff70; }
.b-yellow { border: 1px solid  #ffdc00;color: #ffdc00; }
.b-orange { border: 1px solid  #ff851b;color: #ff851b; }
.b-red { border: 1px solid  #ff4136;color: #ff4136; }
.b-fuchsia { border: 1px solid  #f012be;color: #f012be; }
.b-purple { border: 1px solid  #b10dc9;color: #b10dc9; }
.b-maroon { border: 1px solid  #85144b;color: #85144b; }
.b-white { border: 1px solid  #ffffff;color: #ffffff; }
.b-gray { border: 1px solid  #aaaaaa;color: #aaaaaa; }
.b-silver { border: 1px solid  #dddddd;color: #dddddd; }
.b-black { border: 1px solid  #111111;color: #111111; }.bk-n{background: none;}
.bs-n{box-shadow: none;}.red{background-color:#d9534f;color:white;}
.orange{background-color:#ec971f;color:white;}
.blue{background-color:#5CA3DE;color:white;}
.green{background-color:#71CA71;color:white;}
.navy { background-color: #001f3f; color:white;}
.aqua { background-color: #7fdbff;color:white; }
.teal { background-color: rgb(0,150,136); color:white;}
.olive { background-color: #3d9970; color:white;}
.lime { background-color: #01ff70; }
.yellow { background-color: #ffdc00; }
.orange { background-color: #ff851b; }
.red { background-color: #ff4136; }
.fuchsia { background-color: #f012be; }
.purple { background-color: #b10dc9; }
.maroon { background-color: #85144b; }
.white { background-color: #ffffff; }
.gray { background-color: #aaaaaa; }
.silver { background-color: #dddddd; }
.black { background-color: #111111; }.c-red{color:#d9534f;}
.c-orange{color:#ec971f;}
.c-blue{color:#5CA3DE;}
.c-green{color:#71CA71;}
.c-navy { color: #001f3f; }
.c-aqua { color: #7fdbff; }
.c-teal { color: rgb(0,150,136); }
.c-olive { color: #3d9970; }
.c-lime { color: #01ff70; }
.c-yellow { color: #ffdc00; }
.c-orange { color: #ff851b; }
.c-red { color: #ff4136; }
.c-fuchsia { color: #f012be; }
.c-purple { color: #b10dc9; }
.c-maroon { color: #85144b; }
.c-white { color: #ffffff; }
.c-gray { color: #aaaaaa; }
.c-silver { color: #dddddd; }
.c-black { color: #111111; }.fl,.fl *{display:block;float: left;clear: none;}
.fl-l{float: left}
.fl-r{float: right}
.fl-n{float:none}
.w-1 {width: 4.166666667%}
.w-2 {width: 8.333333333%}
.w-3 {width: 12.5%}
.w-4 {width: 16.66666667%}
.w-5 {width: 20.83333333%}
.w-6 {width: 25%}
.w-7 {width: 29.16666667%}
.w-8 {width: 33.33333333%}
.w-9 {width: 37.5%}
.w-10 {width: 41.66666667%}
.w-11 {width: 45.83333333%}
.w-12 {width: 50%}
.w-13 {width: 54.16666667%}
.w-14 {width: 58.33333333%}
.w-15 {width: 62.5%}
.w-16 {width: 66.66666667%}
.w-17 {width: 70.83333333%}
.w-18 {width: 75%}
.w-19 {width: 79.16666667%}
.w-20 {width: 83.33333333%}
.w-21 {width: 87.5%}
.w-22 {width: 91.66666667%}
.w-23 {width: 95.83333333%}
.w-24 {width: 100%}.h-1 {height: 16px;line-height: 16px;}
.h-2 {height: 28px;line-height: 28px;}
.h-3 {height: 32px;line-height: 32px;}
.h-4 {height: 48px}
.h-5 {height: 64px}
.h-6 {height: 80px}
.h-7 {height: 96px}.t-l{text-align: left}
.t-c{text-align: center}
.t-r{text-align: right}.f,.f *{display: flex}
.f-1    {flex:1}
.f-2    {flex:2}
.f-3    {flex:3}
.f-4    {flex:4}
.f-5    {flex:5}
.f-6    {flex:6}
.f-7    {flex:7}
.f-8    {flex:8}
.f-9    {flex:9}
.f-10{flex:10}
.f-11{flex:11}
.f-12{flex:12}
.f-13{flex:13}
.f-14{flex:14}
.f-15{flex:15}
.f-16{flex:16}
.f-17{flex:17}
.f-18{flex:18}
.f-19{flex:19}
.f-20{flex:20}
.f-21{flex:21}
.f-22{flex:22}
.f-23{flex:23}
.f-24{flex:24}

纯CSS3实现Material Design相关推荐

  1. android+水滴粘性动画,纯css实现Material Design中的水滴动画按钮

    前言 大家平时应该经常见到这种特效,很炫酷不是吗 这是谷歌Material Design中最常见的特效了,市面上也有很多现成的js库,用来模拟这一特效.但是往往要引入一大堆js和css,其实在已有的项 ...

  2. 怎么用java做水滴动画_‘纯css实现Material Design中的水滴动画按钮’的js体验优化...

    前言 在上一篇,我们已经实现了用纯css实现水滴扩散动画,但是有一些瑕疵,文章结尾处也提到过,一是页面加载进来就会看到按钮上的水滴动画运动一次,二是点击的时候不能根据鼠标的位置来扩散,今天我们来解决这 ...

  3. 纯CSS Material Design风格按钮

    其实Material Design的扁平化icon按钮,这类型的按钮往往只利用几何色块的变化,就能抓住使用者的眼光,并且从几何形状中明白按钮的含意,这也是Material Design非常强调的设计理 ...

  4. css520.520,30个纯css3动画代码片段和效果演示合集

    开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...

  5. Material Design 设计规范总结(2)

    本文是Material Design设计规范总结的第二部分,是进行UI设计与前端开发的必备参考资料. 八.布局 (1)所有可操作元素最小点击区域尺寸:48dp X 48dp. (2)栅格系统的最小单位 ...

  6. mint ui tabbar选中后怎么改变icon图标_UI全书（下）读后梳理：iPhone设计规范和Material Design规范...

    本文转载自简书,作者:Bystander7原文链接: https://www.jianshu.com/p/507f0fcb0457 - UI全书(下)<UI设计师进阶完全指南>读后梳理:i ...

  7. android md 颜色,安卓MD(Material Design)规范

    Md规范是一种设计风格,并不特指规范.是一种模拟纸张的手法. 一.核心思想 把物理世界的体验带进屏幕.去掉现实中的杂质和随机性,保留其最原始纯净的形态.空间关系.变化与过度,配合虚拟世界的灵活特性,还 ...

  8. css app菜单,简单的Material Design风格手机App菜单特效

    插件描述:这是一款非常简单的Material Design风格手机App菜单特效.该特效使用CSS3和少量的jQuery代码来完成.在用户点击汉堡包菜单按钮之后,按钮会变形放大到整个手机APP屏幕,同 ...

  9. Android UI开发——Material Design界面设计【详细】

    转自:http://colachan.com/post/3416 找了很多Material Design的资料,终于找到一篇比较靠谱的.能看懂的,我认为非常有用的学习资料,就像他们说的,只要你按Mat ...

最新文章

  1. spark mysql 驱动_spark读取mysql数据库的驱动问题
  2. 【Linux 驱动】第九章 与硬件通信
  3. 排除计算机故障的顺序,计算机故障排除.ppt
  4. Linux下MySql插入汉字报错解决（/etc/my.cnf不存在）
  5. 请分别介绍一下aof和rdb都有哪些优点？以及两者有何区别？
  6. 再次梳理css3动画部分知识
  7. mysql命令导入导出数据库_MYSQL命令行导入导出数据库详解
  8. 仿ios桌面vivo_vivo全新OriginOS细节曝光：系统UI大变样
  9. 平凡的世界电子书pdf下载_零基础彩铅画入门教程步骤图及全套PDF电子书教程下载！...
  10. Calendar类和GregorianCalendar类
  11. socket心跳超时检测，快速处理新思路（适用于超大量TCP连接情况下）
  12. 测试标准I/O缓冲的代码，
  13. C#基础代码笔记(四)
  14. Android 性能专项之 Memory Monitor 工具-memery
  15. PHP前一页 后一页 切换
  16. 在CAD制图软件中标注数学公式的操作技巧
  17. Spring Boot 学习[一] 介绍与入门
  18. 功能安全b等级_安全B端会议吸引了越来越多的信息安全人群
  19. 舅妈的计算机课1-9,山东省济南市历下区2017届九年级教学三模语文试题（word版含答案）...
  20. 汽车电子功能安全标准ISO26262解析（一）——总述部分

热门文章

  1. 结束oracle import,Oracle 结束 imp/exp 和 expdp/impdp 进程的正确方法
  2. IDEA无法通过类加载器获取resources文件夹配置文件解决办法
  3. maven配置国内阿里云镜像
  4. 帕金森定律（Parkinson's Law）
  5. HDU_5249(百度之星D题)
  6. [转] 最近点对距离问题
  7. 计算机病毒的防范(一)计算机病毒的分类
  8. QT的系统总结（非常全面）
  9. C#操作Access数据库
  10. c#中字节数组byte[]、图片image、流stream，字符串string、内存流MemoryStream、文件file，之间的转换