我想讓滑鼠放在div上就讓它旋轉變大，離開div後它又恢復本來的樣子。
於是我就想寫乙個js，監聽乙個hover事件，當hover發生的時候，觸發乙個計時器，在計時器裡寫兩個值，乙個管角度，乙個管寬度，隨著時間的變化逐漸增加，不斷地重寫div的style。當達到我期望的limit的值後讓它停止（或者乾脆解除計時器）。
再監聽乙個le**e事件，當le**e發生後，讓一切以它原來的style為limit的方向變化。（所以一開始就要get到這個div最初的style並且儲存好）
然而事實上這個用css3也能實現吖！
給個容器加個class就好了
<div
class
="guodu"
>css3過渡
div>
剩下的全部交給css3
.guodu
在transition裡規定好想要變化的屬性以及期望經過多少時間能達到最大的效果，時間越長就會越慢咯。
不過如果我要修改時間的話要乙個乙個改真的很煩，這只是乙個test而已，要是乙個大工程，改起來肯定會是各種酸爽。
直到我知道了乙個東西叫css preprocessor，css預處理器，有一種預處理器叫做scss/sass，
這個東西可以對css進行程式設計，我們可以寫乙個變數專門儲存時間，然後寫在css中就好啦，如果想改時間，改變量就好啦！
寫好以後是這個樣子
$speed : 1s;.guodu
然而要讓sass生效，我們還得安裝ruby的環境......我最討厭裝環境了，所以我放棄了。
還乙個很煩人的事情是不僅transition要寫多個瀏覽器版本，transform也要寫多個瀏覽器的版本。這個也是硬傷，沒有辦法......
講真，這件事情還沒完，我們目前只是把期望看到變化的屬性和時間設定好了，具體期望變化到的目標的limit值還是要在hover偽類上來設定
.guodu:hover
然後就沒有然後了......
依舊是乙個很low逼的效果......
CSS3實現可翻轉的hover效果
css3實現可翻轉的hover效果,具體 如下所示 1.css 基礎樣式 html body ul a div ul li dis block n 1滑鼠hover效果 前後翻轉 n 1 ul li n 1 ul li hover n 2滑鼠hover效果 上浮 n 2 ul li n 2 ul l...
css3實現滑鼠懸浮 顯示 隱藏
以前我們總是通過js去實現一些簡單的隱藏和顯示 自從前後端開始分離後更多人把這些能用css實現的東西 放在了前端 如賬號密碼的判斷等 現在我們有這樣的 doctype html en utf 8 viewport content width device width,initial scale 1....
CSS3製作hover下劃線動畫
1 前幾天看到hexo的next主題標題hover效果很炫，自己嘗試寫了乙個，另乙個是next的實現，照例先上圖 2 實現小黑科技 j ascript void 0 class demo1 自己實現的hover效果 css樣式 demo1 demo1 before程式設計客棧 demo1 hover...