三個關鍵屬性：transform transition animation
基本知識：
1、變形transform
1.1、縮放
scale transform
：scale(0.5
，1.5) //
水平縮小
50%， 垂直擴大150%
，只有乙個引數時兩個方向一樣
1.2、傾斜
skew transform
：skew(30deg
，30deg)//
兩個方向的傾斜， 只有乙個引數時表示水平傾斜（左上）
1.3、移動
translate transform
：translate(30px
，30px)//
兩個方向 的平移，只有乙個引數時表示水平平移（右上）
1.4、旋轉
rotate transform:rotate(45deg) //
順時針旋轉45度
注意：使用transform
方法變形時，是以元素的基準點進行的， 使用transform-origin
屬性可改變基準點，水平方向可取
left center right,垂直方向可取
top center bottom
2、transition
transition:property duration timing-function,引數一指定對哪個引數進行平滑過渡，引數二指定多長時間內完成過度，引數三指定用什麼方法進行過度
3、animation
使用方法：
1、建立關鍵幀(注意:要相容的話要加上字首，如-webkit-等)
@keyframes 關鍵幀集合名
50%100%
2、在指定元素上使用關鍵幀
-webkit-animation-name: 關鍵幀名；
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
語法：
animation
: name duration timing-function delay iteration-count direction; 值
描述animation-name
規定需要繫結到選擇器的 keyframe 名稱。
animation-duration
規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function
規定動畫的速度曲線。
animation-delay
規定在動畫開始之前的延遲。
animation-iteration-count
animation-direction
animation-direction
: normal|alternate; 值
描述normal
alternate
**實踐：
transition
transform:translate(x,y)
測試transform:scale(x,y)
測試transform:skew(x,y)
測試transform:rotate()
animation
.test-transition,.test-transform_translate,.test-transform_scale,
.test-transform_skew,.test-transform_rotate,.test-animate
.sum
.test-transition
.test-transition:hover
.test-transform_translate,.test-transform_scale,
.test-transform_skew,.test-transform_rotate
.test-transform_translate
.test-transform_translate:hover
.test-transform_scale
.test-transform_scale:hover
.test-transform_skew
.test-transform_skew:hover
.test-transform_rotate
.test-transform_rotate:hover
.test-animate
@keyframes changecolor
50%100%
}
由於是動畫效果，不好演示，就不上圖了，可自行copy**到瀏覽器看效果
CSS之 動畫模組
我們單刀直入講步驟 第一步 告訴系統要執行哪乙個動畫 animation name pingyi 動畫名稱可以任意起乙個 第二步 告訴系統我們要建立乙個名稱叫做pingyi的動畫 keyframes pingyi to 第三步 告訴系統動畫持續的時長 animation duration 3s 基礎...
css動畫效果 位置移動 CSS 高階之動畫
前端基礎16課 從入門到放棄 網易雲課堂 study.163.com 我們都知道動畫電影由一幀一幀的靜態畫面拼接而成，一秒動畫有24幀畫面，如果低於24幀，人眼即可感知畫面切換，就會有卡頓的感覺。css 中，如果按一秒24幀的畫法來寫 未免太過繁瑣。所以我們把動畫拆解為動作 transition 乙...
CSS動畫之轉換模組
2d轉換模組 注意點 1.可以類似於過渡模組一樣簡寫，但是這裡不是用逗號隔開而是用空格 2.2d的轉換模組會修改元素的座標系，所以旋轉之後的平移就不是水平平移 格式 旋 transform rotate 30deg 旋轉角度 平移 transform translate 50px,100px 平移的...