本篇文章主要介绍了" CSS3:实现一个循序渐进的下划线和一个Material Button"，主要涉及到方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
前言两个效果，一个是从无到有循序渐进的下划线效果；一个是谷歌扁平化按钮点击填充效果--简单粗暴易上手
效果图实现原理下划线的很简单：就是before结合hove...
前言
两个效果，一个是从无到有循序渐进的下划线效果；一个是谷歌扁平化按钮点击填充效果--简单粗暴易上手
效果图
实现原理
下划线的很简单：就是before结合hover，配合transition过度来实现从无到有的渐进过程；为什么需要两个transtion过渡，因为我们要考虑脱离hover状态，也需要渐进回收，这样看起来才比较舒适。。
MD按钮(active): 这个效果是我看到我手机上（S7 EDGE）设置有这个效果，就突然想试试用CSS3能不能写； 这里涉及到的知识点有【居中，层级的先后，以及圆角的配合过渡】。。。相对上面，也就复杂一丢丢；
代码demo
<htmllang="en"><head><metacharset="UTF-8"><title>循序渐进的下划线及MD按钮效果title><styletype="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><divclass="wrapper"><h1>这是一个需要循序渐进的下划线h1><ahref="javascript:;"class="fadeIn-underlinie">fadeIn undelinea>div><divclass="wrapper"><h1>这是一个需要点击填充，类似MD按钮的效果h1><ahref="javascript:;"class="active-fillmode">Material Button Active effect Emulatea>div>body>html>
总结
心血来潮搞起就搞起了。。实现起来很简单；
此处的效果都是PC上的。若是要考虑移动端的话，hover应该为active才能看到效果，毕竟手机并木有hover；
').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('
').text(i));
};
$numbering.fadeIn(1700);
});
});
以上就介绍了 CSS3:实现一个循序渐进的下划线和一个Material Button，包括了方面的内容，希望对CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。
本文网址链接：http://www.codes51.com/article/detail_3542622.html
