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逼的效果......