CSS3实现鼠标hover的过渡效果

我想让鼠标放在div上就让它旋转变大，离开div后它又恢复本来的样子。

于是我就想写一个JS，监听一个hover事件，当hover发生的时候，触发一个计时器，在计时器里写两个值，一个管角度，一个管宽度，随着时间的变化逐渐增加，不断地重写div的style。当达到我期望的limit的值后让它停止（或者干脆解除计时器）。

再监听一个leave事件，当leave发生后，让一切以它原来的style为limit的方向变化。（所以一开始就要get到这个div最初的style并且保存好）

然而事实上这个用CSS3也能实现吖！

给个容器加个class就好了

<div class="guodu">css3过渡</div>

剩下的全部交给CSS3

.guodu{
    width:100px; 
    height:50px; 
    margin:0px auto; 
    margin-top:50px; 
    background:#6C6; 
    opacity:0.6; 
    border:1px solid #fff; 
    border-radius:15px; 
    color:#fff; 
    text-align:center; 
    line-height:50px; 
    font-size:16px; 
    /*善解人意的分割线*/
    transition:width 2s, height 2s, background 2s, transform 2s; 
    -moz-transition:width 2s, height 2s, background 2s, -moz-transform 2s; 
    -webkit-transition:width 2s, height 2s, background 2s, -webkit-transform 2s; 
    -o-transition:width 2s, height 2s, line-height 2s, background 2s, -o-transform 2s;
}

在transition里规定好想要变化的属性以及期望经过多少时间能达到最大的效果，时间越长就会越慢咯。

不过如果我要修改时间的话要一个一个改真的很烦，这只是一个test而已，要是一个大工程，改起来肯定会是各种酸爽。

直到我知道了一个东西叫css preprocessor，CSS预处理器，有一种预处理器叫做scss/sass，

这个东西可以对css进行编程，我们可以写一个变量专门存储时间，然后写在css中就好啦，如果想改时间，改变量就好啦！

写好以后是这个样子

$speed : 1s;

.guodu{
    width:100px; 
    height:50px; 
    margin:0px auto; 
    margin-top:50px; 
    background:#6C6; 
    opacity:0.6; 
    border:1px solid #fff; 
    border-radius:15px; 
    color:#fff; 
    text-align:center; 
    line-height:50px; 
    font-size:16px;
    /*善解人意的分割线*/
    transition:width $speed, height $speed, background $speed, transform $speed; 
    -moz-transition:width $speed, height $speed, background $speed, -moz-transform $speed; 
    -webkit-transition:width $speed, height $speed, background $speed, -webkit-transform $speed; 
    -o-transition:width $speed, height $speed, line-height $speed, background $speed, -o-transform $speed;
}

然而要让sass生效，我们还得安装Ruby的环境......我最讨厌装环境了，所以我放弃了。

还一个很烦人的事情是不仅transition要写多个浏览器版本，transform也要写多个浏览器的版本。这个也是硬伤，没有办法......

讲真，这件事情还没完，我们目前只是把期望看到变化的属性和时间设定好了，具体期望变化到的目标的limit值还是要在hover伪类上来设置

.guodu:hover{
    width:200px; 
    height:60px; 
    background:#39F; 
    line-height:60px; 
    cursor:pointer;
    /*善解人意的分割线*/
    transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
}

然后就没有然后了......

依旧是一个很low逼的效果......

CSS3实现鼠标hover的过渡效果

相关推荐