圖片文字遮罩效果
變形 transiform:translate
元素旋轉(zhuǎn)(默認沿Z軸旋轉(zhuǎn))
perspective(800px) 設(shè)置透視的距離
transiform-style:preserve-3d 三維空間顯示
變形中心點 transiform-origin:
設(shè)置數(shù)值 在坐標(biāo)點旋轉(zhuǎn)
背面可見 transiform:rotate(180deg)
背面不可見 backface-visibility:hidden
CSS3 animation動畫
1硝训、@keyframes 定義關(guān)鍵幀動畫
2朵逝、animation-name 動畫名稱
3、animation-duration 動畫時間
4、animation-timing-function 動畫曲線
linear 勻速
ease 開始和結(jié)束慢速
ease-in 開始是慢速
ease-out 結(jié)束時慢速
ease-in-out 開始和結(jié)束時慢速
steps 動畫步數(shù)
5瞬捕、animation-delay 動畫延遲
6盹靴、animation-iteration-count 動畫播放次數(shù) n|infinite
7膘魄、animation-direction
normal 默認動畫結(jié)束不返回
Alternate 動畫結(jié)束后返回
8椎椰、animation-play-state 動畫狀態(tài)
paused 停止
running 運動
9、animation-fill-mode 動畫前后的狀態(tài)
none 不改變默認行為
forwards 當(dāng)動畫完成后蜘澜,保持最后一個屬性值(在最后一個關(guān)鍵幀中定義)
backwards 在 animation-delay 所指定的一段時間內(nèi)施流,在動畫顯示之前,應(yīng)用開始屬性值(在第一個關(guān)鍵幀中定義)
both 向前和向后填充模式都被應(yīng)用
10鄙信、animation:name duration timing-function delay iteration-count direction;同時設(shè)置多個屬性