transition過渡和transform轉換
阿新 • • 發佈：2022-03-26
transition過渡
讓樣式變化時有一個過渡效果。
transition-property：過渡的屬性，all 指的是所有屬性都過渡。
transition-duration：過渡時間。
transition-delay：延遲過渡的時間。
transition-timing-function：過渡速度曲線，值和動畫的一樣。
transition 是一個複合屬性，它的值依次是：要過渡的屬性、過渡時間、延遲過渡時間、過渡速度曲線。
<!DOCTYPE html> <html lang="en"> <head> <metacharset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>transition過渡</title> <style> body { background: #333; display: flex; justify-content: center; align-items: center; height: 100vh; } .box { background: white; width: 100px; height: 100px; /* 執行過渡的屬性 all：所有屬性都有過渡 */ transition-property: all; /* 過渡時間 */ transition-duration: 2s; /* 過渡延遲時間 */ /* transition-delay: 2s; */ /* 過渡速度曲線*/ transition-timing-function: ease-in-out; /* 過渡 */ /* transition: 過渡屬性 過渡時間 過渡延時時間 過渡速度曲線; */ } .box:hover { background: red; color: cyan; border-radius: 50%; width: 210px; height: 120px; } </style> </head> <body> <div class="box">字型</div> </body> </html>
transform轉換
可以讓元素進行 2D 或 3D 轉換，比如說平移、旋轉等。
rotate(25deg)：元素進行順時針旋轉 25 度，如果是負數那就是逆時針。
skew(25deg)：元素進行扭曲 25 度。
scale(2)：元素放大 2 倍。
translateY(100px)：元素 Y 軸向下移動 100px。
translateX(100px)：元素 X 軸向右移動 100px。
transition(100px, 100px)：元素 X 軸和 Y 軸移動 100px。引數 1 是 X 軸，引數 2 是 Y 軸。
<!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>transform</title> <style> body { background: #333; display: flex; justify-content: center; align-items: center; height: 100vh; } .box { background: white; width: 300px; height: 300px; /* 旋轉25度 */ /* transform: rotate(25deg); */ /* 扭曲25度 */ /* transform: skew(25deg); */ /* 放大2倍 */ /* transform: scale(2); */ transition: 0.5s; } .box:hover { /* 旋轉25度 */ /* transform: rotate(25deg); */ /* 扭曲25度 */ transform: skew(25deg); /* 放大2倍 */ /* transform: scale(2); */ /* Y 軸向下移動 100px */ /* transform: translateY(100px); */ /* X 軸右移動 100px */ /* transform: translateX(100px); */ /* transform：translate(X軸, Y軸) */ /* transform: translate(100px, 100px); */ } </style> </head> <body> <div class="box"></div> </body> </html>