前言
两个效果,一个是从无到有循序渐进的下划线效果;一个是谷歌扁平化按钮点击填充效果–简单粗暴易上手
效果图
实现原理
下划线的很简单:就是before
结合:hover
,配合transition
过渡来实现从无到有的渐进过程;为什么需要两个transtion
过渡,因为我们要考虑脱离:hover
状态,也需要渐进回收,这样看起来才比较舒适。
MD按钮(active): 这个效果是我看到我手机上(S7 EDGE)设置有这个效果,就突然想试试用CSS3能不能写; 这里涉及到的知识点有【居中,层级的先后,以及圆角的配合过渡】,相对上面,也就复杂一丢丢;
代码demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循序渐进的下划线及MD按钮效果</title>
<style type="text/css">
/* 演示容器 */
.wrapper {
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 800px;
height<