2d旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉
使用步驟:css
transform
rotate(角度)
如 transform:rotate(30deg)
順時針方向旋轉30度div{ transform: rotate(0deg); }
div { position: relative; width: 249px; height: 35px; border: 1px solid #000; } div::after { content: ""; position: absolute; top: 8px; right: 15px; width: 10px; height: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); transition: all 0.2s; } /* 鼠標通過div 裏面的三角旋轉 */ div:hover::after { transform: rotate(225deg); }
transform-origin
基礎語法動畫
transform-origin: x y;
重要知識點spa
center
center
top
、bottom
、left
、right
、center
)div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; transition: all 1s; /* 1.能夠跟方位名詞 */ /* transform-origin: left bottom; */ /* 2. 默認的是 50% 50% 等價於 center center */ /* 3. 能夠是px 像素 */ transform-origin: 50px 50px; } div:hover { transform: rotate(360deg); }
2D
轉換之 scale
scale
的做用code
語法orm
transform: scale(x, y)
知識要點animation
transform: scale(1, 1)
: 寬高都放大一倍,至關於沒有放大transform: scale(2, 2)
: 寬和高都放大了二倍transform: scale(2)
: 若是隻寫了一個參數,第二個參數就和第一個參數一致transform:scale(0.5, 0.5)
: 縮小scale
最大的優點:能夠設置轉換中心點縮放,默認以中心點縮放,並且不影響其餘盒子代碼演示it
div:hover { /* 注意,數字是倍數的含義,因此不須要加單位 */ /* transform: scale(2, 2) */ /* 實現等比縮放,同時修改寬與高 */ /* transform: scale(2) */ /* 小於 1 就等於縮放*/ transform: scale(0.5, 0.5) }
2D
轉換綜合寫法以及順序問題知識要點io
transform: translate() rotate() scale()
代碼演示function
div:hover { transform: translate(200px, 0) rotate(360deg) scale(1.2) }
什麼是動畫form
CSS3
中最具顛覆性的特徵之一,可經過設置多個節點來精確的控制一個或者一組動畫,從而實現複雜的動畫效果動畫的基本使用
語法格式(定義動畫)
@keyframes 動畫名稱 { 0% { width: 100px; } 100% { width: 200px } }
語法格式(使用動畫)
div { /* 調用動畫 */ animation-name: 動畫名稱; /* 持續時間 */ animation-duration: 持續時間; }
動畫序列
from
和 to
,等同於 0% 和 100%代碼演示
<style> div { width: 100px; height: 100px; background-color: aquamarine; animation-name: move; animation-duration: 0.5s; } @keyframes move{ 0% { transform: translate(0px) } 100% { transform: translate(500px, 0) } } </style>
代碼演示
div { width: 100px; height: 100px; background-color: aquamarine; /* 動畫名稱 */ animation-name: move; /* 動畫花費時長 */ animation-duration: 2s; /* 動畫速度曲線 */ animation-timing-function: ease-in-out; /* 動畫等待多長時間執行 */ animation-delay: 2s; /* 規定動畫播放次數 infinite: 無限循環 */ animation-iteration-count: infinite; /* 是否逆行播放 */ animation-direction: alternate; /* 動畫結束以後的狀態 */ animation-fill-mode: forwards; } div:hover { /* 規定動畫是否暫停或者播放 */ animation-play-state: paused; }
動畫簡寫方式
/* animation: 動畫名稱 持續時間 運動曲線 什麼時候開始 播放次數 是否反方向 起始與結束狀態 */ animation: name duration timing-function delay iteration-count direction fill-mode
知識要點
animation-paly-state
animation-paly-state: paused
; 常常和鼠標通過等其餘配合使用animation-direction: alternate
animation-fill-mode: forwards
代碼演示
animation: move 2s linear 1s infinite alternate forwards;
速度曲線細節
animation-timing-function
: 規定動畫的速度曲線,默認是ease
代碼演示
div { width: 0px; height: 50px; line-height: 50px; white-space: nowrap; overflow: hidden; background-color: aquamarine; animation: move 4s steps(24) forwards; } @keyframes move { 0% { width: 0px; } 100% { width: 480px; } }