Home > Developer > Web Develop
Implementation principle两个效果，一个是从无到有循序渐进的下划线效果；一个是谷歌扁平化按钮点击填充效果--简单粗暴易上手
The underline is very simple : before combined with hover, with transition over to achieve the gradual process from scratch, why need two transtion transitions, because we have to consider out of the hover state, but also need to gradually recover, so it seems more comfortable.
MD button (Active): This effect is I see on my Phone (S7 EDGE) settings have this effect, suddenly want to try CSS3 can write, here is involved in the knowledge Point has "center, the level of succession, and the fillet of the mating transition" ... Relative to the above, it is also a loss of complexity;
Code Demo<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Progressive underline and MD button effect</title> <style type="Text/css"> / * Demo container * / . Wrapper {-webkit-box-sizing : Border-box ; box-sizing : Border-box ; max-width : 800 px ; height : px ; margin : 0 Auto ; text-align : center ; / * control before with hover to achieve progressive underline * / . Fadein-underlinie { text-decoration: none; color: #333; font-size: + px; 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: %; -webkit-transition: width 0.2s linear; Transition: width 0.2s linear; } / * Implement similar material button long press fill effect * / . Active-fillmode { text-decoration: none; color: #333; font-size: + px; position: relative; padding: 5px ; } . Active-fillmode:: Before{ content: ' ; position: Absolute ;Left : % ; top: % ; Border-radius: ten%/ ; -webkit-transform: Translate (-%,-%) ; transform: Translate (-%,-%) ; height: % ; width: 0 ; z-index: -1 ; -webkit-transition: all 1s linear ; transition: all 1s linear ;} . Active-fillmode: Active{ background: rgba (217,216,216,. ); } . Active-fillmode: Active:: Before{ width: % ; height: % ; Border-radius: 0 ; background: rgba (217,216,216,. ) ; -webkit-transition: all 1s linear ; transition: all 1s linear ;} </style></head><body> <div class="wrapper"> <H1>This is an underscore that needs to be gradual</H1> <a href="javascript:;" class="Fadein-underlinie">FadeIn Undeline</a> </div> <div class="wrapper"> <H1>This is a need to click the fill, like the effect of the MD button</H1> <a href="javascript:;" class="Active-fillmode">Material Button Active Effect emulate</a> </div></body></html>心血来潮搞起就搞起了。。实现起来很简单；此处的效果都是PC上的。若是要考虑移动端的话，hover应该为active才能看到效果，毕竟手机并木有hover；
CSS3: Implement a progressive underline and a material button "No JS"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
