纯CSS Material Design风格按钮
其实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元素来表示比较快。
<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;
}
web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路
主体设定好之后,接着就要来设定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;
}
完成的效果就是长这样。
接着是另外一个,原理基本上大同小异,然而不需要做形状变换反而简单许多,只需要调整角度和长宽就好啰!
.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;
}web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路
完成的效果长这样。
以上就是纯粹利用CSS做出来的Material Design风格按钮,相信熟练之后就可以做出更多不错的应用!
纯CSS Material Design风格按钮相关推荐
- html点击波,Material Design风格按钮点击波动画效果
这是一款Material Design风格按钮点击波动画效果.该按钮设计在用户点击按钮时,按钮上会产生各种流光动画效果,非常炫酷. 使用方法 在页面中引入style.css文件. HTML结构 该Ma ...
- css app菜单,简单的Material Design风格手机App菜单特效
插件描述:这是一款非常简单的Material Design风格手机App菜单特效.该特效使用CSS3和少量的jQuery代码来完成.在用户点击汉堡包菜单按钮之后,按钮会变形放大到整个手机APP屏幕,同 ...
- html卡片布局按钮,Material Design风格动态网格卡片布局UI设计
这是一款效果非常炫酷的Material Design风格动态网格卡片布局UI设计效果.在该效果中鼠标滑过卡片时会有阴影效果,当浏览器尺寸改变时,卡片大小会随着改变,整个网格布局有动态变化效果. 使用方 ...
- 移动端html模板卡片列表效果,移动手机Material Design风格信息卡片UI设计
这是一款非常时尚的移动手机Material Design风格信息卡片UI设计效果.该卡片设计效果中所有的卡片在点击或触摸之后,会以平滑过渡动画全屏展开.整个设计以扁平风格为主,非常时尚. 使用方法 H ...
- Material Design风格登录注册
本文实现了以下功能 完整的代码和样例托管在Github 当接口锁定时,防止后退按钮显示在登录Activity 上. 自定义 ProgressDialog来显示加载的状态. 符合材料设计规范. 悬浮标签 ...
- android抽屉风格,Android开发实战之拥有Material Design风格的抽屉式布局
在实现开发要求中,有需要会使用抽屉式布局,类似于QQ5.0的侧滑菜单,实现的方式有很多种,可以自定义控件,也可以使用第三方开源库. 同样的谷歌也推出了自己的侧滑组件--DrawLayout,使用方式也 ...
- 开启Fluter基础之旅二-------Future再论、常用组件、Material Design风格组件学习
Future再论: 这里在继续往下学习之前,先来看一下Dart语言关于Event-Queue和Microtask Queue需要注意的一个小点,这个在之前https://www.cnblogs.com ...
- html5 仿微信语音播放器,Material design风格HTML5 audio音频播放器
jAudio.js是一款基于HTML5 audio的Material design风格音频播放器jQuery插件.该音频播放器可以设置音频播放列表,每首曲子的封面,标题等,还可以控制歌曲的播放和快进, ...
- Flutter 入门学习(五)— Material Design风格组件
文章目录 1. 概述 2. App结构和导航组件 2.1 MaterialApp(应用组件) 2.1.1 设置主页 2.1.2 路由处理 2.1.3 自定义主题 2.2 Scaffold(脚手架组件) ...
最新文章
- Docker的性能损耗:以基因组分析流程为例
- Java Socket编程如何建立两者关系
- Linux 7 pycurl.so: undefined symbol 解决方法
- java 模板方法设计模式_Java中的模板方法设计模式
- 基于VC++6.0的DLL开发
- 索引导航-第三版-pyhui
- android layout 替换,LayoutInflater 后记--替换系统控件
- 台式计算机视频设备打不开,电脑视频设备被占用未能创建视频预览怎么办
- STM32笔记 (十)定时器(基本定时器)利用基本定时器实现毫秒延时
- springcloud springboot 集成cxf webservice框架,配置cxf拦截器
- Java docx4j 操作word 2.1
- kindle可以看html格式文章吗,Kindle 新功能上线:终于可以显示阅读数据了
- H5混合APP开发框架
- 脚本小子_python正则表达式
- 红帽杯find_it
- SpringCloud(三 Eureka集群配置)
- 计算机本科 很多很多科目的总结
- 太牛了!华为天才少年稚晖君又自制硬萌机器人,代码开源了
- 淘宝,天猫,京东,苏宁抢购茅台、手机等脚本(适合兼职,亲测可用)
- 关于nohup重定向日志按日期区分文件(未解决)