CSS3制作hover下划线动画

1、前几天看到Hexo的next主题标题hover效果很炫，自己尝试写了一个，另一个是next的实现，照例先上图

2、实现小黑科技

?

1 2 3 4

<!-- html结构 --> < div >      < a href = "javascript:void(0);" class = "demo1" >自己实现的hover效果</ a > </ div >

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

/* css样式 */          .demo 1 {              position : relative ;              text-decoration : none ;              font-size : 20px ;              color : #333 ;          }          .demo 1: before{              content : "" ;              position : absolute ;              left : 50% ;              bottom : -2px ;              width : 0 ;              height : 2px ;              background : #4285f4 ;              transition: all . 3 s;          }          .demo 1: hover:before{              width : 100% ;              left : 0 ;              right : 0 ;          }

关键在于没有hover的时候定义width为0，这样可以实现宽度从0到100%的变化。

left为50%，目的是为了动画开始的位置是在50%的位置。

3、hexo next主题的官方实现

?

1 2 3 4

<!-- html结构 --> < div >      < a href = "javascript:void(0);" class = "demo2" >Hexo next主题的实现</ a > </ div >

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

/* css样式 */          .demo 2 {              position : relative ;              text-decoration : none ;              font-size : 20px ;              color : #333 ;          }          .demo 2: before{              content : "" ;              position : absolute ;              left : 0 ;              bottom : -2px ;              height : 2px ;              width : 100% ;              background : #4285f4 ;              transform: scale( 0 );              transition: all 0.3 s;          }          .demo 2: hover:before{              transform: scale( 1 );          }

这个实现的关键就是scale(0)到scale(1)的变化。

CSS3的scale transform的原点是中点，所以会从中间的位置开始动画。

4、两者区别

通过动画也看出来，next的动画有透明渐变的效果，和scale的表现形式有关。

第一个实现只是width变化，但是也可以用animation实现和next一样的效果。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

原文链接：http://www.cnblogs.com/zhangmingze/p/5351983.html