其实 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 风格按钮, 相信熟练之后就可以做出更多不错的应用啰!
来源: http://www.jianshu.com/p/a81715e821b6