当前位置：Gxlcms > css > CSS3实现MaterialDesign的示例代码分享

CSS3实现MaterialDesign的示例代码分享

时间：2021-07-01 10:21:17 帮助过：30人阅读

不断更新中

预览

  1. 这是一个正在完善的css文件，是对原生组件基于标签属性做了美化，对datepicker,select等无法用css实现的暂不考虑在本文内。

按钮 Button

初始按钮

  1.     <button>button</button>
  2.     <button class="red">red</button>
  3.     <button class="orange">orange</button>
  4.     <button class="blue">blue</button>
  5.     <button class="green">green</button>
  6.     <button class="link">link</button>

描边按钮

  1.     <button class="b-red bk-n">button</button>
  2.     <button class="b-red">red</button>
  3.     <button class="b-orange">orange</button>
  4.     <button class="b-blue">blue</button>
  5.     <button class="b-green">green</button>

禁用按钮

  1.     <button disabled>disabled</button>

上浮按钮

  1.     <button class="circle">+</button>
  2.     <button class="circle teal">+</button>

按钮组

  1.     <nav class="btn-group">
  2.         <button>button</button>
  3.         <button>button</button>
  4.         <button>button</button>
  5.     </nav>

表单Form

文本输入

  1. <input type="text">
  2. <input type="password" >

开关

  1.  <input type="checkbox" id="switch1" class="switch"><label for="switch1"></label>

单选

  1. <input type="radio" id="test_radio1" name="ra"><label for="test_radio1">radio1</label>
  2. <input type="radio" disabled id="test_radio3" name="ra"><label for="test_radio3">radio3</label>
  3. <input type="radio" checked disabled id="test_radio4" name="ras"><label for="test_radio4">radio4</label>

多选

  1. <input id="test_checkbox1" type="checkbox"><label for="test_checkbox1">check1</label>
  2. <input id="test_checkbox3" disabled type="checkbox"><label for="test_checkbox3">check3</label>
  3. <input id="test_checkbox4" checked disabled type="checkbox"><label for="test_checkbox4">check4</label>

部分样式

  1. article,
  2. aside,
  3. details,
  4. figcaption,
  5. figure,
  6. footer,
  7. header,
  8. hgroup,
  9. main,
  10. menu,
  11. nav,
  12. section,
  13. summary {
  14.     display: block
  15. }
  16. audio,
  17. canvas,
  18. progress,
  19. video {
  20.     display: inline-block;
  21.     vertical-align: baseline
  22. }
  23. audio:not([controls]) {
  24.     display: none;
  25.     height: 0
  26. }
  27. [hidden],
  28. template {
  29.     display: none
  30. }
  31. li {
  32.     list-style: none
  33. }
  34. a {
  35.     background-color: transparent
  36. }
  37. a:active,
  38. a:hover {
  39.     outline: 0
  40. }
  41. abbr[title] {
  42.     border-bottom: 1px dotted
  43. }
  44. b,
  45. strong {
  46.     font-weight: 700
  47. }
  48. dfn {
  49.     font-style: italic
  50. }
  51. h1 {
  52.     font-size: 2em;
  53.     margin: .67em 0
  54. }
  55. mark {
  56.     background: #ff0;
  57.     color: #000
  58. }
  59. small {
  60.     font-size: 80%
  61. }
  62. sub,
  63. sup {
  64.     font-size: 75%;
  65.     line-height: 0;
  66.     position: relative;
  67.     vertical-align: baseline
  68. }
  69. sup {
  70.     top: -.5em
  71. }
  72. sub {
  73.     bottom: -.25em
  74. }
  75. img {
  76.     border: 0
  77. }
  78. svg:not(:root) {
  79.     overflow: hidden
  80. }
  81. figure {
  82.     margin: 1em 40px
  83. }
  84. hr {
  85.     box-sizing: content-box;
  86.     height: 0
  87. }
  88. pre {
  89.     overflow: auto
  90. }
  91. code,
  92. kbd,
  93. pre,
  94. samp {
  95.     font-family: monospace, monospace;
  96.     font-size: 1em
  97. }
  98. button,
  99. input,
  100. optgroup,
  101. select,
  102. textarea {
  103.     color: inherit;
  104.     font: inherit;
  105.     margin: 0
  106. }
  107. button {
  108.     overflow: visible
  109. }
  110. button,
  111. select {
  112.     text-transform: none
  113. }
  114. button,
  115. html input[type=button],
  116. input[type=reset],
  117. input[type=submit] {
  118.     -webkit-appearance: button;
  119.     cursor: pointer
  120. }
  121. button[disabled],
  122. html input[disabled] {
  123.     cursor: default
  124. }
  125. button::-moz-focus-inner,
  126. input::-moz-focus-inner {
  127.     border: 0;
  128.     padding: 0
  129. }
  130. input {
  131.     line-height: normal
  132. }
  133. input[type=checkbox],
  134. input[type=radio] {
  135.     box-sizing: border-box;
  136.     padding: 0
  137. }
  138. input[type=number]::-webkit-inner-spin-button,
  139. input[type=number]::-webkit-outer-spin-button {
  140.     height: auto
  141. }
  142. input[type=search] {
  143.     -webkit-appearance: textfield;
  144.     box-sizing: content-box
  145. }
  146. input[type=search]::-webkit-search-cancel-button,
  147. input[type=search]::-webkit-search-decoration {
  148.     -webkit-appearance: none
  149. }
  150. fieldset {
  151.     border: 1px solid silver;
  152.     margin: 0 2px;
  153.     padding: .35em .625em .75em
  154. }
  155. legend {
  156.     border: 0;
  157.     padding: 0
  158. }
  159. textarea {
  160.     overflow: auto
  161. }
  162. optgroup {
  163.     font-weight: 700
  164. }
  165. table {
  166.     border-collapse: collapse;
  167.     border-spacing: 0
  168. }
  169. td,
  170. th {
  171.     padding: 0
  172. }
  173. /*html*/
  174. html {
  175.     font-family: sans-serif;
  176.     -ms-text-size-adjust: 100%;
  177.     -webkit-text-size-adjust: 100%
  178. }
  179. /*body*/
  180. body{
  181.     margin: 0;
  182.     background-color: rgb(238,238,238);
  183.     font-size:16px;
  184.     padding: 20px;
  185.     -webkit-box-sizing: border-box;
  186.     box-sizing: border-box;
  187.     font-family: "Microsoft YaHei";
  188.     color:#333;
  189.     text-shadow: 0 0 0.1px rgba(0,0,0,0.2);
  190. }
  191. /*button*/
  192.     button {
  193.         opacity: 0.9;
  194.         line-height: 1rem;
  195.         padding:  0.5rem 1rem;
  196.         border: none;
  197.         outline: none;
  198.       background-color: white;
  199.       text-decoration: none;
  200.       position: relative;
  201.       border-radius:2px;
  202.       box-shadow:0 1px 3px darkgray;
  203.       transition: box-shadow 0.5s ease-out;
  204.     }
  205.  button::before{
  206.       content: '';
  207.     display:block;
  208.       position: absolute;
  209.       left: 50%;
  210.       top: 50%;
  211.       border-radius: 10%/40%;
  212.       -webkit-transform: translate(-50%, -50%) ;
  213.       transform: translate(-50%, -50%) ;
  214.       height: 100%;
  215.       width: 100%;
  216.       z-index: -1;
  217.       -webkit-transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
  218.       transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
  219.   }
  220.   button:hover{
  221.     box-shadow:0 6px 16px darkgray;
  222.       transition: all 0.8s ease-out;
  223.   }
  224. button:active{
  225.  opacity: 1;
  226.       -webkit-transition: all 0.5s ease-out;
  227.       transition: all 0.3s ease-out;
  228. }
  229.   button:active::before{
  230.       width: 0;
  231.       height: 100%;
  232.       border-radius: 0;
  233.       background-color: rgba(0,0,0,.4);
  234.       -webkit-transition: all 0.01s ease-out;
  235.       transition: all 0.01s ease-out;
  236.   }
  237. button.link{
  238.     background:none;
  239.     color:#0275d8;
  240.     box-shadow: none;
  241. }
  242. button[disabled]{
  243.     background-color:lightgray;
  244.     color:darkgray;
  245.     cursor:not-allowed;
  246.     box-shadow: none;
  247. }
  248. .circle{
  249.     border-radius: 100%;
  250. }
  251. button.circle{
  252.     padding: 0;
  253.     width: 3rem;height: 3rem;font-size: 1.5rem;
  254.       box-shadow:0 6px 12px darkgray;
  255. }
  256. button.circle:hover{
  257.       box-shadow:0 12px 24px darkgray;
  258. }
  259.  button.circle::before{
  260.       content: '';
  261.     display:block;
  262.       position: absolute;
  263.       left: 50%;
  264.       top: 50%;
  265.       border-radius: 100%;
  266.       -webkit-transform: translate(-50%, -50%) ;
  267.       transform: translate(-50%, -50%) ;
  268.       height: 100%;
  269.       width: 100%;
  270.       z-index: -1;
  271.       -webkit-transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
  272.       transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
  273.   }
  274.   button.circle:active::before{
  275.       width: 0;
  276.       height: 0;
  277.       border-radius: 100%;
  278.       background-color: rgba(0,0,0,.4);
  279.       -webkit-transition: all 0.01s ease-out;
  280.       transition: all 0.01s ease-out;
  281.   }
  282. /*form*/
  283. input[type=text],
  284. input[type=password],
  285. input[type=number]{
  286.     padding: 0;
  287.     border:none;
  288.     text-indent: 0.5em;
  289.     background: none;
  290.     outline: none;
  291.     border-bottom:2px solid #555;
  292.     line-height: 32px;
  293.         height: 32px;
  294.     box-sizing: border-box;
  295. }
  296. input[type=text]:focus,
  297. input[type=password]:focus,
  298. input[type=number]:focus{
  299.     border-bottom-color: rgb(0,150,136);
  300.     color: rgb(0,150,136);
  301. }
  302. input[type=checkbox],input[type=radio]{
  303.     display: none;
  304. }
  305. input[type=checkbox]+label,input[type=radio]+label{    
  306.     line-height: 1em;
  307.     text-indent: 1.2em;
  308.     width: 1em;
  309.     height: 1em;
  310.     margin: 0.2em 0.1em;
  311.     border: 2px solid #555;
  312.     border-radius: 2px;
  313.     padding: 0px;
  314.     display: inline-block;
  315.     position: relative;
  316.     cursor: pointer;
  317. }
  318. input[type=radio]+label{
  319.     border-radius: 1em;
  320. }
  321. input[type=checkbox]:checked+label,input[type=radio]:checked+label{
  322.     border-color:  rgb(0,150,136);
  323. }
  324. input[type=checkbox]:checked + label:after{
  325.     content: '';
  326.     display: block;
  327.     width: 0.7em;
  328.     height: 0.3em;
  329.     margin: 0.2em 0.1em;
  330.     top: 0;
  331.     left: 0;
  332.     transform:rotate(-45deg);
  333.     -moz-transform:rotate(-45deg);
  334.     -webkit-transform:rotate(-45deg);
  335.     position: absolute;
  336.     border-left: 0.15em solid rgb(238,238,238);
  337.     border-bottom: 0.15em solid rgb(238,238,238);
  338. }
  339. input[type=radio]:checked + label{
  340.     background: rgb(0,150,136);
  341.     box-shadow: 0 0 0 3px rgb(238,238,238) inset;
  342. }
  343. input[type=checkbox] + label:before,input[type=radio] + label:before{
  344.       content: '';
  345.     display:block;
  346.       position: absolute;
  347.       left: 50%;
  348.       top: 50%;
  349.       border-radius: 100%;
  350.       -webkit-transform: translate(-50%, -50%) ;
  351.       transform: translate(-50%, -50%) ;
  352.       height: 4em;
  353.       width: 4em;
  354.       z-index: -1;
  355.       -webkit-transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
  356.       transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
  357. }
  358.   input[type=checkbox]+ label:active::before,input[type=radio]+ label:active::before{
  359.       width: 0;
  360.       height: 0;
  361.       border-radius: 100%;
  362.       background-color: rgb(0,150,136);
  363.       -webkit-transition: all 0.01s ease-out;
  364.       transition: all 0.01s ease-out;
  365.   }
  366.   input[type=checkbox]:checked+ label:active::before,input[type=radio]:checked+ label:active::before{
  367.       background-color: gray;
  368.   }
  369. input[type=checkbox]:checked + label,input[type=radio]:checked + label {
  370.     background-color: rgb(0,150,136);
  371.     color: rgb(0,150,136);
  372. }
  373. input[type=checkbox] + label:active, input[type=checkbox]:checked + label:active,input[type=radio] + label:active, input[type=radio]:checked + label:active {
  374.     background-color:  rgb(0,150,136);
  375. }
  376.  input[type=checkbox]:disabled + label, input[type=radio]:disabled + label{
  377.      border-color:lightgray;color:lightgray;background-color: lightgray;pointer-events: none;
  378.  }
  379.  input[type=checkbox].switch+label{
  380.     left :0;
  381.     border-radius: 1em;
  382.     border-color:gray;
  383.  }
  384.  input[type=checkbox]:checked.switch+label{
  385.     left:1.5em;
  386.     border-color:rgb(0,150,136); 
  387.  }
  388.  input[type=checkbox].switch+label:after{
  389.      content: "";
  390.      position: absolute;
  391.      display: block;
  392.      margin-top: 50%;
  393.     border-bottom: 2px solid lightgray;
  394.     width: 1.4em;
  395.     height: 0;
  396.     transform:rotate(0deg);
  397.     -moz-transform:rotate(0deg);
  398.     -webkit-transform:rotate(0deg);
  399.     margin-left :1.1em;
  400.  }
  401.  input[type=checkbox]:checked.switch+label:after{
  402.     border-bottom: 2px solid rgb(0,150,136); 
  403.     margin-left :-1.1em;
  404.  }
  405. nav.btn-group{
  406.     border-radius: 2px;overflow: hidden;float: left;
  407. }
  408.  nav.btn-group button{
  409.     float: left;border-radius: 0;
  410.     box-shadow: none;
  411.  }
  412.    nav.btn-group button:hover{
  413.     box-shadow: none;
  414.    }
  415.   nav.btn-group button:hover::after{
  416.       content: "";
  417.     display: block;
  418.     position: absolute;
  419.     width: 100%;
  420.     height: 100%;
  421.     top: 0;
  422.     left: 0;
  423.     background: rgba(0, 0, 0, 0.11);
  424. }
  425. nav.menu{
  426.     height: 3rem;padding: 0 1em;background: white;
  427. }
  428. nav.menu>ul{
  429.     padding: 0 1em;margin:0;line-height: 3rem;float: left;
  430. }
  431. mav.menu>ul>li{
  432.     display: block;
  433. }
  434. .b-red{border: 1px solid #d9534f;color:#d9534f;}
  435. .b-orange{border: 1px solid #ec971f;color:#ec971f;}
  436. .b-blue{border: 1px solid #5CA3DE;color:#5CA3DE;}
  437. .b-green{border: 1px solid #71CA71;color:#71CA71;}
  438. .b-navy { border: 1px solid  #001f3f;color: #001f3f;}
  439. .b-aqua { border: 1px solid  #7fdbff;color: #7fdbff;}
  440. .b-teal { border: 1px solid  rgb(0,150,136);color: rgb(0,150,136);}
  441. .b-olive { border: 1px solid  #3d9970;color: #3d9970;}
  442. .b-lime { border: 1px solid  #01ff70;color: #01ff70; }
  443. .b-yellow { border: 1px solid  #ffdc00;color: #ffdc00; }
  444. .b-orange { border: 1px solid  #ff851b;color: #ff851b; }
  445. .b-red { border: 1px solid  #ff4136;color: #ff4136; }
  446. .b-fuchsia { border: 1px solid  #f012be;color: #f012be; }
  447. .b-purple { border: 1px solid  #b10dc9;color: #b10dc9; }
  448. .b-maroon { border: 1px solid  #85144b;color: #85144b; }
  449. .b-white { border: 1px solid  #ffffff;color: #ffffff; }
  450. .b-gray { border: 1px solid  #aaaaaa;color: #aaaaaa; }
  451. .b-silver { border: 1px solid  #dddddd;color: #dddddd; }
  452. .b-black { border: 1px solid  #111111;color: #111111; }
  453. .bk-n{background: none;}
  454. .bs-n{box-shadow: none;}
  455. .red{background-color:#d9534f;color:white;}
  456. .orange{background-color:#ec971f;color:white;}
  457. .blue{background-color:#5CA3DE;color:white;}
  458. .green{background-color:#71CA71;color:white;}
  459. .navy { background-color: #001f3f; color:white;}
  460. .aqua { background-color: #7fdbff;color:white; }
  461. .teal { background-color: rgb(0,150,136); color:white;}
  462. .olive { background-color: #3d9970; color:white;}
  463. .lime { background-color: #01ff70; }
  464. .yellow { background-color: #ffdc00; }
  465. .orange { background-color: #ff851b; }
  466. .red { background-color: #ff4136; }
  467. .fuchsia { background-color: #f012be; }
  468. .purple { background-color: #b10dc9; }
  469. .maroon { background-color: #85144b; }
  470. .white { background-color: #ffffff; }
  471. .gray { background-color: #aaaaaa; }
  472. .silver { background-color: #dddddd; }
  473. .black { background-color: #111111; }
  474. .c-red{color:#d9534f;}
  475. .c-orange{color:#ec971f;}
  476. .c-blue{color:#5CA3DE;}
  477. .c-green{color:#71CA71;}
  478. .c-navy { color: #001f3f; }
  479. .c-aqua { color: #7fdbff; }
  480. .c-teal { color: rgb(0,150,136); }
  481. .c-olive { color: #3d9970; }
  482. .c-lime { color: #01ff70; }
  483. .c-yellow { color: #ffdc00; }
  484. .c-orange { color: #ff851b; }
  485. .c-red { color: #ff4136; }
  486. .c-fuchsia { color: #f012be; }
  487. .c-purple { color: #b10dc9; }
  488. .c-maroon { color: #85144b; }
  489. .c-white { color: #ffffff; }
  490. .c-gray { color: #aaaaaa; }
  491. .c-silver { color: #dddddd; }
  492. .c-black { color: #111111; }
  493. .fl,.fl *{display:block;float: left;clear: none;}
  494. .fl-l{float: left}
  495. .fl-r{float: right}
  496. .fl-n{float:none}
  497. .w-1 {width: 4.166666667%}
  498. .w-2 {width: 8.333333333%}
  499. .w-3 {width: 12.5%}
  500. .w-4 {width: 16.66666667%}
  501. .w-5 {width: 20.83333333%}
  502. .w-6 {width: 25%}
  503. .w-7 {width: 29.16666667%}
  504. .w-8 {width: 33.33333333%}
  505. .w-9 {width: 37.5%}
  506. .w-10 {width: 41.66666667%}
  507. .w-11 {width: 45.83333333%}
  508. .w-12 {width: 50%}
  509. .w-13 {width: 54.16666667%}
  510. .w-14 {width: 58.33333333%}
  511. .w-15 {width: 62.5%}
  512. .w-16 {width: 66.66666667%}
  513. .w-17 {width: 70.83333333%}
  514. .w-18 {width: 75%}
  515. .w-19 {width: 79.16666667%}
  516. .w-20 {width: 83.33333333%}
  517. .w-21 {width: 87.5%}
  518. .w-22 {width: 91.66666667%}
  519. .w-23 {width: 95.83333333%}
  520. .w-24 {width: 100%}
  521. .h-1 {height: 16px;line-height: 16px;}
  522. .h-2 {height: 28px;line-height: 28px;}
  523. .h-3 {height: 32px;line-height: 32px;}
  524. .h-4 {height: 48px}
  525. .h-5 {height: 64px}
  526. .h-6 {height: 80px}
  527. .h-7 {height: 96px}
  528. .t-l{text-align: left}
  529. .t-c{text-align: center}
  530. .t-r{text-align: right}
  531. .f,.f *{display: flex}
  532. .f-1    {flex:1}
  533. .f-2    {flex:2}
  534. .f-3    {flex:3}
  535. .f-4    {flex:4}
  536. .f-5    {flex:5}
  537. .f-6    {flex:6}
  538. .f-7    {flex:7}
  539. .f-8    {flex:8}
  540. .f-9    {flex:9}
  541. .f-10{flex:10}
  542. .f-11{flex:11}
  543. .f-12{flex:12}
  544. .f-13{flex:13}
  545. .f-14{flex:14}
  546. .f-15{flex:15}
  547. .f-16{flex:16}
  548. .f-17{flex:17}
  549. .f-18{flex:18}
  550. .f-19{flex:19}
  551. .f-20{flex:20}
  552. .f-21{flex:21}
  553. .f-22{flex:22}
  554. .f-23{flex:23}
  555. .f-24{flex:24}

以上就是CSS3实现Material Design的示例代码分享的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！