前言:總體來(lái)說(shuō)兩類： 1. transition: 從一個(gè)樣式到另外一個(gè)樣式的過(guò)渡過(guò)程 width：過(guò)渡需要的時(shí)間 linear: 勻速過(guò)度 transition: 2s linear; 勻速過(guò)渡，而且時(shí)長(zhǎng)2s ease: 慢速開始，然后加快，然后慢速結(jié)束 ease-in: 慢速開始 ease-out: 慢速結(jié)束 ease-in-out: 慢速開始和結(jié)束 例子： .div1{width: 100px; transition: 1s linear;} .div1:hover{width:500px;} 過(guò)渡的屬性可以是寬高，字體顏色，背景色等 2. transform：從一個(gè)位置到
總體來(lái)說(shuō)兩類：
1. transition: 從一個(gè)樣式到另外一個(gè)樣式的過(guò)渡過(guò)程
width：過(guò)渡需要的時(shí)間
linear: 勻速過(guò)度 transition: 2s linear; 勻速過(guò)渡，而且時(shí)長(zhǎng)2s
ease: 慢速開始，然后加快，然后慢速結(jié)束
ease-in: 慢速開始
ease-out: 慢速結(jié)束
ease-in-out: 慢速開始和結(jié)束
例子：
.div1{width: 100px; transition: 1s linear;} .div1:hover{width:500px;}
過(guò)渡的屬性可以是寬高，字體顏色，背景色等
2. transform：從一個(gè)位置到另外一個(gè)位置，通常結(jié)合transition來(lái)使用
①旋轉(zhuǎn)
rotate(30deg) 正值是順時(shí)針
rotateX(30deg)
rotateY(30deg)
② 移動(dòng)
translate(x,y) 正值是向右，向下
translate3d(x,y,z)
translateX
translateY
translateZ
③ 縮放
scale(x,y) x,y 是倍數(shù)，可以是負(fù)值
scaleX
scaleY
例子：鼠標(biāo)移入時(shí)元素從最下面沒(méi)有慢慢滑入的效果
轉(zhuǎn)載請(qǐng)注明出處及附上該鏈接：http://ebqao.cn/web/197.html
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
上一篇:<<仿站小工具對(duì)小白有多強(qiáng)大 下一篇:jQuery事件處理筆記>>
