CSS过渡，转换与动画
生活随笔
收集整理的這篇文章主要介紹了
CSS过渡，转换与动画
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
目錄
過渡(transition)
轉(zhuǎn)換(transform)
什么是轉(zhuǎn)換
二維坐標(biāo)系
?移動（translate）
用translate實現(xiàn)居中
旋轉(zhuǎn)（rotate）
設(shè)置旋轉(zhuǎn)中心點
縮放（scale）
使用?
設(shè)置縮放中心點
動畫
用keyframes定義動畫
調(diào)用動畫
動畫的屬性
實例：
進度條案例
扇子展開
過渡(transition)
????????CSS3過度是新增的屬性之一，可以讓我們不需要使用flash動畫或者javascript的情況下，當(dāng)元素從一種樣式變換為另一種樣式時，為元素增加效果。
? ? ? ? 過度動畫指的是一個狀態(tài)漸漸過渡到另外一個狀態(tài)，比如從個蘋果轉(zhuǎn)變成一個西瓜，過度實現(xiàn)轉(zhuǎn)變之間的平滑切換。
? ? ? ? 我們現(xiàn)在經(jīng)常用：hover一起搭配使用。
語法：transition:要過度的屬性 花費時間 運動曲線 何時開始；
- 屬性：指的是元素的寬度，高度，顏色等，如果想全部變換，則寫all
- 花費時間:單位時間為s，寫0.5s表示花費0.5秒
- 運動曲線：默認(rèn)為ease，（可省略）
- 何時開始:單位是秒，也就是事件觸發(fā)的延時時間，默認(rèn)是0s。（可省略）
讀者不妨試試以下例子，實現(xiàn)從藍色盒子轉(zhuǎn)換成紫色盒子。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background: skyblue;transition: all 2s;}div:hover{ width: 300px;height: 600px;background: purple;}</style> </head> <body><div></div> </body> </html>?如果上述不寫all，則可以寫成。
div{width: 200px;height: 200px;background: skyblue;transition: height 2s,width 2s,background-color 2s;}?
轉(zhuǎn)換(transform)
CSS轉(zhuǎn)換是一個非常強勢的東西，CSS轉(zhuǎn)換有兩種方式，分別是2D轉(zhuǎn)換和3D。
什么是轉(zhuǎn)換
轉(zhuǎn)換（transform）是CSS3中具有顛覆性的特性之一，可以實現(xiàn)元素的位移，旋轉(zhuǎn)，縮放等效果。
也就是實現(xiàn)元素的變形。
二維坐標(biāo)系
2D轉(zhuǎn)換是改變標(biāo)簽在二維平面上的位置和形狀的一種技術(shù)，我們先了解一下二維坐標(biāo)系。
水平方向表示X軸，垂直方向表示Y軸，水平向右，X不斷增大，垂直向下，Y不斷增大。
?移動（translate）
移動指的是改變元素的位置，與我們之前學(xué)過的定位類似。
語法格式：
- transform:translate(x,y);
- transform:translateX(n);
- transform:translateY(n);
我們使用以下案例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.translate{width: 100px;height: 100px;background: skyblue;transform:translate(20px,20px);}</style> </head> <body><div class="translate"></div> </body> </html>我們增加（x,y）大小
?注意：
- translate的移動不會影響其他元素的位置
- 若移動采用百分比單位，百分比是相對于自身元素translate(50%,50%);
用translate實現(xiàn)居中
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{margin: 0;}div{position: relative;width: 200px;height: 200px;background: skyblue;}p{position: absolute;top:50%;left:50%;width:100px;height: 100px;background: purple;transform: translate(-50%, -50%);}</style> </head> <body><div><p></p></div> </body> </html>旋轉(zhuǎn)（rotate）
2D旋轉(zhuǎn)指的是讓元素2維平面中順時針或者逆時針旋轉(zhuǎn)。
語法：transform:rotate(度數(shù))
注意：
- 單位為deg,度數(shù)為正表示順時針旋轉(zhuǎn)，度數(shù)為負(fù)表示逆時針旋轉(zhuǎn)
- 默認(rèn)的旋轉(zhuǎn)中心點為元素的中心點
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {padding:100px;}div{width: 200px;height: 200px;background: skyblue;transform:rotate(45deg);}</style> </head> <body><div></div> </body> </html>設(shè)置旋轉(zhuǎn)中心點
屬性：transform-origin
語法：transform-origin: x y;
默認(rèn)值為50%，50%，也就是元素中心點，我們可以嘗試以下例子：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{padding: 100px;}div{width: 100px;height: 100px;background: purple;transition: all 1s;transform-origin: bottom left;}div:hover{transform:rotate(360deg);}</style> </head> <body><div></div> </body> </html>縮放（scale）
實現(xiàn)元素的放大和縮小
語法：treansform:scale(x,y);
注意：
- transform：scale(1,1);寬高都放大1倍等于沒有縮放
- transform:scale(2)等于寬高都放大兩倍，如果沒有寫第二個參數(shù)，第二個參數(shù)默認(rèn)與第一個參數(shù)大小相同
- scale的放大縮小不會影響其他盒子
使用?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background: purple;transition: all 1s;margin:100 auto;}div:hover{transform:scale(2,2);}</style> </head> <body><div></div> </body> </html>設(shè)置縮放中心點
?與旋轉(zhuǎn)變換中心點相同
動畫
可以通過多個節(jié)點來精確控制一個或者一組動畫，常來實現(xiàn)復(fù)雜的動畫效果，動畫與過渡的區(qū)別在于，動畫能實現(xiàn)更多變化，更多控制等效果。
制作動畫分為兩個步驟
- 先定義動畫
- 再調(diào)用動畫
用keyframes定義動畫
@keyframes turnto {0%{transform:translateX(0);}100%{transform:translateX(500px);} }動畫序列：
- 0%是動畫的開始，100%是動畫的結(jié)束，這個就是動畫序列
- 通過在@keyframes中規(guī)定某項CSS樣式，就能創(chuàng)建不同的動畫效果
- 我們可以通過改變?nèi)我舛嗟臉邮皆O(shè)置任意多的動畫效果
- 我們用百分比來規(guī)定動畫發(fā)生的順序，也可以通過from與to分別代表0%與100%
調(diào)用動畫
- animation-name:動畫名稱
- animation-duration:動畫持續(xù)時間
我們通過使用以下案例實現(xiàn)盒子按照正方形路徑移動，要注意百分比數(shù)字只能為整數(shù)。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background: purple;margin: 0 auto;/* 調(diào)用動畫 */animation-name:move;/* 動畫持續(xù)時間 */animation-duration:4s;}@keyframes move {0%{transform:translate(0,0);}25%{transform:translate(500px,0);}50%{transform:translate(500px,500px);}75%{transform:translate(0,500px);}100%{transform:translate(0,0);}}</style> </head> <body><div></div> </body> </html>動畫的屬性
| animation-delay | 設(shè)置延時，即從元素加載完成之后到動畫序列開始執(zhí)行的這段時間。 |
| animation-direction | 設(shè)置動畫在每次運行完后是反向運行還是重新回到開始位置重復(fù)運行 |
| animation-duration | 設(shè)置動畫一個周期的時長。 |
| animation-iteration-count | 設(shè)置動畫重復(fù)次數(shù)，可以指定 infinite 無限次重復(fù)動畫 |
| animation-play-state | 允許暫停和恢復(fù)動畫。 |
| animation-name | 指定由@keyframes描述的關(guān)鍵幀名稱 |
| animation-timing-funciton | 設(shè)置動畫的運動曲線 |
| animation-fill-mode | 動畫結(jié)束后停留在起始位置或者結(jié)束位置 |
動畫屬性的使用格式：
animation{/* 延遲4s開始播放 */animation-delay: 4s;/* 運動曲線，平穩(wěn)播放 */animation-timing-function: ease;/* 設(shè)置動畫播放無限循環(huán) count表示次數(shù)。infinite表示無限 */animation-iteration-count: infinite;/* 是否反方向播放 alternate表示逆向播放 normal表示默認(rèn)播放*/animation-direction: alternate;/* 動畫結(jié)束后停留在起始位置或者結(jié)束位置，停在結(jié)束位置設(shè)置backwards */animation-fill-mode: backwards;/* 規(guī)定動畫運行或者停止，可以設(shè)置鼠標(biāo)經(jīng)過時停止 running為運行,pause為停止*/animation-play-state: running;}實例：
進度條案例
????????鼠標(biāo)經(jīng)過實現(xiàn)進度條拉滿
?
<html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.process-bar{width: 450px;height: 30px;border: 1px solid rgb(52, 122, 242);border-radius:15px;}.process-bar-child{width: 50%;height:100%;background: skyblue;border-radius: 15px;transition: all 1s;}.process-bar:hover .process-bar-child{width: 100%;}</style> </head> <body><div class="process-bar"><div class="process-bar-child"></div></div> </body> </html>扇子展開
????????鼠標(biāo)經(jīng)過實現(xiàn)扇子展開
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*TODO：請補充 CSS 代碼*/#box{margin: 100px 300px;position: relative;}#box [id^=item]{position: absolute;height: 400px;width: 200px;border-radius: 20px;transform-origin: bottom center;transition: all 2s;}#box div:nth-child(3n){background: pink;}#box div:nth-child(3n+1){background: skyblue;}#box div:nth-child(3n+2){background: purple;}#box:hover #item1 {transform: rotate(-60deg);}#box:hover #item2 {transform: rotate(-50deg);}#box:hover #item3 {transform: rotate(-40deg);}#box:hover #item4 {transform: rotate(-30deg);}#box:hover #item5 {transform: rotate(-20deg);}#box:hover #item6 {transform: rotate(-10deg);}#box:hover #item7 {transform: rotate(10deg);}#box:hover #item8 {transform: rotate(20deg);}#box:hover #item9 {transform: rotate(30deg);}#box:hover #item10 {transform: rotate(40deg);}#box:hover #item11 {transform: rotate(50deg);}#box:hover #item12 {transform: rotate(60deg);}</style> </head> <body><div id="box"><div id="item1"></div><div id="item2"></div><div id="item3"></div><div id="item4"></div><div id="item5"></div><div id="item6"></div><div id="item7"></div><div id="item8"></div><div id="item9"></div><div id="item10"></div><div id="item11"></div><div id="item12"></div></div> </body> </html>以上內(nèi)容如有錯誤，請大家在評論區(qū)指正，謝謝支持，共同進步。 加油！！！
如果你感覺我寫的內(nèi)容對你有一定的幫助，請給我點一個 【贊】作為您對我的鼓勵， 感謝! ! !
總結(jié)
以上是生活随笔為你收集整理的CSS过渡，转换与动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： acunetix wvs网站漏洞扫描 X
- 下一篇： div css 立体效果,定义CSS样式