web前端入门到实战:纯CSS Material Design风

作者: 大前端世界 | 来源:发表于2019-12-20 18:17 被阅读0次

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

    应用重点与原理

    在这篇我纯粹利用CSS,就做出了Material Design风格的按钮,其实没有很难,比较需要知道的重点如下:

    • 伪元素before和after的应用

    伪元素在里头扮演相当重要的角色,利用伪元素我们可以产生两个不在HTML里头的类div,可以大幅降低代码的复杂程度。

    • div的自身宽度与边框

    由于我们要进行三角形与矩形之间的形变,虽然三角形可由边框产生,但却无法做出漂亮的形变效果(用背景色的话就会有淡入淡出的现象),所以必须要用边框宽度和矩形大小去搭配,当边框变细的时候,矩形变大,如此一来就可以做出三角形与矩形互相变换的效果啰,下图的红色是纯粹用颜色变换,蓝色则是用边框宽度与div宽度变换,效果应该很明显吧!

    • transform的应用

    CSS里所有的形变都是藉由transform来完成(必要时请加各个浏览器的前坠字),示例里头会用到scale与rotate这两个变形属性。

    实现Material Design风格按钮

    了解原理之后,先来看一下HTML代码,代码里面有两个主要的div分别是a和b,a的话是利用伪元素来进行变换,b的内容还有三个小i分别是b1、b2和b3(都会宣告为block属性),因为大于两个就无法纯粹使用伪元素,所以直接用三个block元素来表示比较快。

    学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
    (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
    <div class="a"></div>
    <div class="b">
      <i class="b1"></i>
      <i class="b2"></i>
      <i class="b3"></i>
    </div>
    

    接下来就是CSS了,先看到a,首先当然是先画两条垂直的矩形,做出暂停的icon,这里直接利用伪元素来画,比较特别的是「高度为0」,因为在上面有说过,为了要塑造一个「形状的变换」,而不是「颜色的淡入淡出」,所以必须用border-width来代替高度(记得加上transition的渐变时间)。

    .a{
      position:absolute;
      top:50px;
      left:50px;
      width:100px;
      height:100px;
      border-radius:50%;
      background:#363;
      transition:.2s;
    }
    .a:before,.a:after{
      content:"";
      position:absolute;
      width:12px;
      height:0;
      top:24px;
      border-style:solid;
      border-width:0 0 54px 0;
    }
    .a:before{
      left:27px;
      border-color:#fff rgba(255,255,255,0) #fff rgba(255,255,255,0);
      transition:.2s;
    }
    .a:after{
      left:54px;
      border-color: rgba(255,255,255,0) rgba(255,255,255,0) #fff #fff ;
      transition:.2s;
    }
    

    主体设定好之后,接着就要来设定hover和active的效果,这里就会用transform的scale和rotate,除了变形,仔细看一下,宽度和border宽度都改变了,加上位置的互相搭配,就可以很容易地做出两个矩形在鼠标移上去的时候变成三角形,点下去的时候变成正方形啰!(scale如果设定两个值,分别就是宽与长的变形比例)

    .a:hover:before{
      top:26px;
      left:45px;
      width:0;
      transform:scale(2,1.17) rotate(90deg);
      border-width:0 0 24px 24px; 
    }
    .a:hover:after{
      top:53px;
      left:45px;
      width:0;
      transform:scale(2,1.17) rotate(90deg);
      border-width:0 24px 24px 0; 
    }
    .a:hover{
      background:#095;
      transition:.4s;
    }
    .a:active:before{
      border-width:0 0 24px 0;
      width:22px;
      top:26px;
      left:38px;
      transition:.4s;
    }
    .a:active:after{
      border-width:0 0 24px 0;
      width:22px;
      top:50px;
      left:38px;
      transition:.4s;
    }
    .a:active{
      transform:rotate(180deg);
      background:#0a9;
    }
    

    完成的效果就是长这样。

    接着是另外一个,原理基本上大同小异,然而不需要做形状变换反而简单许多,只需要调整角度和长宽就好啰!

    学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
    (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
    .b{
      position:absolute;
      top:50px;
      left:160px;
      width:100px;
      height:100px;
      border-radius:50%;
      background:#09c;
      transition:.2s;
    }
    .b i{
      position:absolute;
      display:block;
      width:56px;
      height:10px;
      background:#fff;
      left:22px;
      border-radius:2px;
      transition:.2s;
    }
    .b1{
      top:24px;
    }
    .b2{
      top:44px;
    }
    .b3{
      top:64px;
    }
    .b:hover .b1{
      left:15px;
      width:70px;
      transform:translateY(20px) rotate(45deg);
    }
    .b:hover .b3{
      left:15px;
      width:70px;
      transform:translateY(-20px) rotate(-45deg);
    }
    .b:hover .b2{
      left:50px;
      width:0;
    }
    .b:hover{
      background:#c00;
    }
    .b:active .b1{
      width:40px;
      transform:translateY(11px) rotate(-45deg);
      transition:.3s;
    }
    .b:active .b3{
      width:40px;
      transform:translateY(-7px) rotate(45deg);
      transition:.3s;
    }
    .b:active .b2{
      top:46px;
      left:22px;
      width:60px;
      transition:.3s;
    }
    .b:active{
      transform:rotate(45deg);
      background:#f70;
    }
    

    完成的效果长这样。

    以上就是纯粹利用CSS做出来的Material Design风格按钮,相信熟练之后就可以做出更多不错的应用啰!

    相关文章

      网友评论

        本文标题:web前端入门到实战:纯CSS Material Design风

        本文链接:https://www.haomeiwen.com/subject/pqwenctx.html