過渡/動畫/變形
阿新 • • 發佈：2020-11-04
一、過渡（transition）
1.1transition-property：指定要執行過渡的屬性
1.2transition-duration: 指定過渡效果的特效時間
1.3transition-timing-function 過渡的時序函式
1.4transition-delay：過渡前需等待的時間
1.5 例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>過渡</title> <style> *{ margin: 0; padding: 0; } .box1{ width: 800px; height: 600px; background-color: silver; } .box1 div{ width: 100px; height: 100px; } .box2{ background-color: orange; margin-bottom: 100px; /* 過渡（transition） - 通過過渡可以指定一個屬性發生變化時的切換方式 - 通過位移可以建立一些非常好的效果，提升使用者的體驗 */ /* transition: all 2s; */ /*transition-property：指定要執行過渡的屬性 多個屬性（height，width...）間用","隔開 如果所有屬性都需要過渡，則使用all 大部分屬性都支援過渡效果，注意：過渡時必須從一個有效數值 到另一個有效數值 */ transition-property: all; /* transition-duration: 指定過渡效果的特效時間 */ transition-duration: 2s; /* transition-timing-function 過渡的時序函式 - 指定過渡的執行方式 可選值： case：預設值，慢速開始，先加速，再減速 linear：勻速運動 ease-in：加速運動 ease-out：減速運動 ease-in-out：先加速，後減速 cubic-bezier()：未指定時序函式(貝塞爾曲線) https://cubic-bezier.com steps()：分步執行過渡效果 可以設定第二個值： end：在時間結束時執行過渡（預設值） start：在時間開始時執行過渡 */ transition-timing-function: cubic-bezier(.32,1.6,.69,-1.05); /* transition-timing-function: steps(2, start); */ /* transition-delay：過渡前需等待的時間 */ transition-delay: 1s; } .box3{ background-color: #bfa; transition: all 2s; } .box1:hover div{ /* width: 200px; height: 200px; background-color: skyblue; */ margin-left: 700px; } </style> </head> <body> <div class="box1"> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
注：以上的效果只有在滑鼠移入的時候才會發生，不符合使用者預期使用，所以我們需要動畫來製作。
二、動畫（animation）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>動畫</title> <style> .box1{ width: 800px; height: 600px; background-color: silver; } .box2{ width: 100px; height: 100px; background-color: orange; /* 設定box2的動畫 */ /* animation-name：要對當前元素生效的關鍵幀的名字 */ animation-name: test; /* animation-duration：動畫執行時間 */ animation-duration: 3s; /* animation-delay：動畫延遲時間 */ animation-delay: 2s; animation-timing-function: ease-in-out; /* animation-iteration-count：動畫執行的次數 - 次數 - infinite 無限執行 */ animation-iteration-count: 2; /* animation-direction：指定動畫執行方向 normal：預設值，從 from 向 to 執行，每次如此 reverse：從 to 向 from 執行，每次如此 alternate：從 from 向 to 執行，重複執行動畫時反向執行 alternate-reverse：從 to 向 from 執行，重複執行動畫時反向執行 */ /* animation-direction: alternate; */ /* animation-play-state：設定動畫的執行狀態 - running：預設值，動畫執行 - paused：動畫暫停 */ /* animation-play-state: paused; */ /* animation-fill-mode：動畫填充模式 - none：預設值，動畫執行完畢，元素回到原來位置 - forwards：動畫執行完畢，元素會停止在動畫結束的位置 - backwards：動畫延時等待時，元素就會處於開始位置 - both：結合了forwards和backwards */ animation-fill-mode: both; } /* 動畫： 動畫和過渡類似，都可以實現一些動態效果 - 不同：過渡需要在某個屬性發生變化時才會觸發 動畫可以自動觸發動態效果 設定動畫效果，必須先要設定一個關鍵幀，關鍵幀設定了動畫執行的每個步驟 */ @keyframes test{ /* from表示動畫的開始位置，也可以使用0% */ from{ margin-left: 0; } /* to表示動畫的結束位置，也可以使用100% */ to{ margin-left: 700px; } } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
2.1 動畫（sprite animation——>搜圖）
2.2 小球運動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ball</title> <style> .outer{ height: 700px; border-bottom: 10px solid black; /* 由於父子元素相鄰的外邊距，子元素的會傳遞給父元素（上邊距） 導致垂直外邊距重疊 可以開啟BFC */ overflow: hidden; } .outer div{ width: 50px; height: 50px; background-color: red; border-radius: 50%; float: left; margin: 0 5px; animation: ball 2s ease-in forwards infinite alternate; } /* .ball2權重比 .outer div 低，故不能覆蓋，得增加權重 */ div.ball2{ background-color: lawngreen; animation-delay: .1s; } div.ball3{ background-color: rgb(210, 255, 255); animation-delay: .2s; } div.ball4{ background-color: orange; animation-delay: .3s; } div.ball5{ background-color: skyblue; animation-delay: .4s; } div.ball6{ background-color: pink; animation-delay: .5s; } div.ball7{ background-color: purple; animation-delay: .6s; } div.ball8{ background-color: hotpink; animation-delay: .1s; } div.ball9{ background-color: yellow; animation-delay: .2s; } div.ball10{ background-color: rgba(0, 130, 252, 0.753); animation-delay: .3s; } div.ball11{ background-color: rgba(235, 252, 0, 0.521); animation-delay: .4s; } div.ball12{ background-color: rgba(252, 151, 0, 0.753); animation-delay: .5s; } @keyframes ball{ from{ margin-top: 0; } 20%, 60%, to{ margin-top: 650px; animation-timing-function: ease-in; } 40%{ margin-top: 80px; } 80%{ margin-top: 200px; } } </style> </head> <body> <div class="outer"> <div class="ball"></div> <div class="ball2"></div> <div class="ball3"></div> <div class="ball4"></div> <div class="ball5"></div> <div class="ball6"></div> <div class="ball7"></div> <div class="ball8"></div> <div class="ball9"></div> <div class="ball10"></div> <div class="ball11"></div> <div class="ball12"></div> </div> </body> </html>
三、變形（transform）
3.1 平移translate（不佔位）
① translateX()：沿著x軸方向平移
② translateY()：沿著y軸方向平移
③ translateZ()：沿著z軸方向平移
使用z軸需要設定網頁的視距
/* 設定當前網頁的視距為800px，人眼距離網頁的距離 */
perspective: 800;
百分比：相對於自身移動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>變形——平移</title> <style> html{ /* 視距 */ perspective: 800px; } .box1{ width: 200px; height: 200px; background-color: teal; margin: 100px auto; /* transform: translateX(200px); */ /* transform: translateY(100%); */ /* transform: translate(200px, 100%); */ /* z軸平移，調整元素在z軸的位置 正常情況：調整元素和人眼間的距離，距離越大，元素離人越近 z軸平移屬於立體效果（近大遠小），預設情況下網頁是不支援透視， 故需要設定視距 */ transform: translateZ(200px); } .box2{ width: 230px; height: 300px; background-color: orange; /* 過渡效果，顯得更加自然 */ transition: all .2s; } .box2:hover{ /* box-shadow: 水平方位 垂直方位 模糊程度 顏色 */ box-shadow: 8px 4px 10px #999; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
3.2 旋轉（rotate）
① rotateX(xxdeg)
② rotateY(xxtturn)
③ rotateZ(xxdeg)
單位：deg、turn
3.2.1 鐘錶
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鐘錶</title> <style> .clock{ width: 400px; height: 400px; /* border: 8px solid black; */ border-radius: 50%; /* 設定背景圖片 */ background-image: url("./img/clock.jpg"); background-size: contain; margin: 0 auto; margin-top: 100px; position: relative; } /* 居中程式碼 */ .sec-wrapper, .min-wrapper, .hour-wrapper{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } /* 時針 */ .hour-wrapper{ width: 60%; height: 60%; animation: run 7200s linear infinite; } .hour{ width: 6px; height: 50%; background-color: black; margin: 0 auto; } /* 分針 */ .min-wrapper{ width: 70%; height: 70%; animation: run 600s steps(60) infinite; } .min{ width: 4px; height: 50%; background-color: black; margin: 0 auto; } /* 秒針 */ .sec-wrapper{ width: 88%; height: 88%; /* background-color: #fba; */ animation: run 10s steps(60) infinite; } .sec{ width: 2px; height: 50%; background-color: red; margin: 0 auto; } @keyframes run { from{ transform: rotateZ(0); } to{ transform: rotateZ(1turn); } } </style> </head> <body> <div class="clock"> <!-- 由於旋轉預設是中心旋轉，而鐘錶的旋轉點不是中心點 解決： ① 在錶針外新增一個div，讓其進行旋轉（推薦） ② 設定旋轉原點(原點不好控制) ③ 遮住錶針的一半（不推薦） --> <div class="hour-wrapper"> <div class="hour"></div> </div> <div class="min-wrapper"> <div class="min"></div> </div> <div class="sec-wrapper"> <div class="sec"></div> </div> </div> </body> </html>
3.2.2 立方體
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>cube</title> <style> /* 設定視距，一般800-1000px */ html{ perspective: 800px; } .cube{ width: 200px; height: 200px; /* background-color: green; */ margin: 150px auto; position: relative; /* 設定3d效果 */ transform-style: preserve-3d; animation: turn 4s linear alternate infinite; } @keyframes turn{ to{ transform: rotateY(1.5turn) rotateZ(82deg) rotateX(60deg); } } .cube img{ width: 200px; height: 200px; position: absolute; top: 0; left: 0; opacity: .7; } .cube_01{ transform: rotateY(90deg) translateZ(-100px); } .cube_02{ transform: rotateY(-90deg) translateZ(-100px); } .cube_03{ transform: rotateX(-90deg) translateZ(-100px); } .cube_04{ transform: rotateX(90deg) translateZ(-100px); } .cube_05{ transform: translateZ(-100px); } .cube_06{ transform: translateZ(100px); } </style> </head> <body> <div class="cube"> <img class="cube_01" src="./img/cube_01.jpg"> <img class="cube_02" src="./img/cube_02.jpg"> <img class="cube_03" src="./img/cube_03.jpg"> <img class="cube_04" src="./img/cube_04.jpg"> <img class="cube_05" src="./img/cube_05.jpg"> <img class="cube_06" src="./img/cube_06.jpg"> </div> </body> </html>
3.3 縮放（scale）
① scaleX()：水平方向的縮放
② scaleY()：垂直方向的縮放
③ scale()：雙方向的縮放
填的是倍數
以上的操作都是在二維下進行的，如果要弄3D的，需要設定3d變形：
/* 設定3d變形效果 */
transform-style: preserve-3d;
3.4 變形原點（transform-origin）：預設值為center
transform-origin: 20px 20px;