基础理解2:CSS3按钮动画

一个Css3按钮效果很好，仔细看了一下发现就是::after,::before然后加上transition，transform等效果实现，主要关注一下几点就能轻松实现：

1、伪类需要position定位，相对的button也需要定位一下

2、设置一下z-index属性,一般button设置为1， button::after或者button:before设置为-1即可

3、transition实现动画效果，如果需要transform旋转一下

效果如下：

代码如下：

   DOCTYPE html  > 

   html  > 

   head  > 

   meta   http-equiv  ="Content-Type"   content  ="text/html; charset=utf-8"   /> 

   title  >  title  > 

   meta   charset  ="utf-8"   /> 

   style   type  ="text/css"  >  

button:hover:after   {  

width  :   100%  ; 

 }  

   

button:hover   {  

color  :   #000  ; 

 }  

   

button:after   {  

content  :   ''  ;  

background-color  :   #fff  ;  

transition  :   all .5s  ;  

width  :   0%  ;  

position  :   absolute  ;  

top  :   3px  ;  

left  :   0px  ;  

height  :   34px  ;  

z-index  :   -1  ; 

 }  

   

button   {  

width  :   100px  ;  

height  :   40px  ;  

border  :   0px  ;  

color  :   white  ;  

background-color  :   red  ;  

font-size  :   16px  ;  

position  :   relative  ;  

z-index  :   1  ;  

cursor  :   pointer  ;  

font-family  :   'Microsoft YaHei'  ; 

 } 

   style  > 

   head  > 

   body  > 

   button  >  

保存

    button  > 

   body  > 

   html  >  

查看更多关于基础理解2:CSS3按钮动画的详细内容...