CSS3:实现一个循序渐进的下划线和一个Material波纹按钮
Posted crper
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3:实现一个循序渐进的下划线和一个Material波纹按钮相关的知识，希望对你有一定的参考价值。
前言
两个效果，一个是从无到有循序渐进的下划线效果；一个是谷歌扁平化按钮点击填充效果–简单粗暴易上手
效果图
实现原理
下划线的很简单：就是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: 100px;
margin: 0 auto;
text-align: center;
/* 操纵before结合hover实现循序渐进的下划线 */
.fadeIn-underlinie
text-decoration: none;
color: #333;
font-size: 40px;
position: relative;
padding: 5px;
.fadeIn-underlinie::before
content: '';
position: absolute;
bottom: -3px;
left: 0;
height: 3px;
background-color: #5D1DF1;
width: 0;
-webkit-transition: width 0.2s linear;
transition: width 0.2s linear;
.fadeIn-underlinie:hover::before
width: 100%;
-webkit-transition: width 0.2s linear;
transition: width 0.2s linear;
/* 实现类似material按钮长按填满的效果 */
.active-fillmode
text-decoration: none;
color: #333;
font-size: 40px;
position: relative;
padding: 5px 50px;
.active-fillmode::before
content: '';
position: absolute;
left: 50%;
top: 50%;
border-radius: 10%/30%;
-webkit-transform: translate(-50%, -50%) ;
transform: translate(-50%, -50%) ;
height: 100%;
width: 0;
z-index: -1;
-webkit-transition: all 1s linear;
transition: all 1s linear;
.active-fillmode:active
background: rgba(217,216,216,.65);
.active-fillmode:active::before
width: 100%;
height: 100%;
border-radius: 0;
background: rgba(217,216,216,.95);
-webkit-transition: all 1s linear;
transition: all 1s linear;
</style>
</head>
<body>
<div class="wrapper">
<h1>这是一个需要循序渐进的下划线</h1>
<a href="javascript:;" class="fadeIn-underlinie">fadeIn undeline</a>
</div>
<div class="wrapper">
<h1>这是一个需要点击填充，类似MD按钮的效果</h1>
<a href="javascript:;" class="active-fillmode">Material Button Active effect Emulate</a>
</div>
</body>
</html>
总结
心血来潮搞起就搞起了。。实现起来很简单；
此处的效果都是PC上的。若是要考虑移动端的话，:hover应该为active才能看到效果，毕竟手机浏览器并木有:hover；
以上是关于CSS3:实现一个循序渐进的下划线和一个Material波纹按钮的主要内容，如果未能解决你的问题，请参考以下文章