css二維動畫
阿新 • • 發佈：2020-07-15
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } div{ width: 100px; height: 100px; background-color: red; margin-left: 200px; margin-top: 10px; /* 新增過渡動畫 css樣式 名稱 耗時*/ transition: transform 2s; } /* 移動translate */ div:first-of-type:active { /*使用translate 可以實現元素的移動: a.移動參照元素的左上角 b.執行完畢以後恢復到原來的狀態 如果是一個引數表示x軸 若果是兩個引數就代表直角座標系 */ /* 通常在設定的時候使用x和y */ transform: translateX(300px); transform: translateY(300px); } /* 縮放：scale */ div:nth-of-type(2):active{ /* 大於1表示放大,小於1表示縮小 如果只有1個引數,就代表x/y方向都進行等比縮放 如果是兩個引數就x/y方向 */ /* 通常使用x/y */ transform: scaleY(0.5); } /* 旋轉:rotate */ div:nth-of-type(3):active { /* 設定旋轉軸心 關鍵字:left top right bottom center */ background-color: purple; transform-origin: left top; } /* 同時給div3新增多個transform屬性 */ div:nth-of-type(3):active { transform: translateX(700px) rotate(-90deg); } /* 斜切:skew */ div:nth-of-type(4):active { background-color: blue; /* 如果這個角度為正,則往當前負方向斜切 */ transform: skew(-30deg); } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </body> </html>