學完基礎的css和js后我又來補css3了QAQ,沒想到內容居然這么多，簡單簡單記錄一下
阿巴阿巴，驚了！學習程序中發現css選擇器也可以結合正則運算式~~（裝逼利器Get）~~
CSS3之2D轉換
2D之移動盒子
**transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
優點:不會影響其他元素的位置
translate的傳的引數百分號是相對于盒子自身大小的百分比（耶！！！居中不用計算了）
transla對于行內元素無效
2D之旋轉 roate
transform:roate(度數)
度數的單位是deg
正值順時針，負值逆時針
默認旋轉的中心點是元素的中心點
旋轉中心點
transform-origin
transform-orfin:x y;
注意x和y用空格隔開
x y默認中心點是50% 50%
還可以給x y設定像素或者方位名詞(top bottmom left right center)**
中心點
transform-origin
transform-orfin:x y;
注意x和y用空格隔開
x y默認中心點是50% 50%
還可以給x y設定像素或者方位名詞(top bottmom left right center)
2D轉換之縮放 scale
/里面的數字不跟單位，1就是1倍，2就是二倍/
transform scale(x,y)
scale(n) //可以只傳一個引數
優勢:不會影響其他盒子，還可以設定縮放的中心點
2D轉換綜合寫法
1.同時使用多個轉換，其格式為：
transform:translate() rotate() scale()…等
2.其順序會影響轉換的效果(先選擇會改變坐標軸方向）
3.當我們同時有位移和其他屬性的時候，記得將位移放在最前
css3之影片
css3影片常用屬性
@keyframes 影片
animation-name 影片名稱
animation-duration 影片完成一個周期花費的時間
animation-timing-function 運動曲線
animation-delay 影片何時開始
animation-iteration-count 規定影片被播放的次數
animation-direction:alternate 影片播完反方向播放
影片播放結束后
animation-fill-mode: (backwards 回到原位置) (forwards保持不動)
animation-play-state: 規定影片是否正在運行或暫停 屬性:running, paused
animation 影片簡寫屬性
animiation:影片名稱 持續時間 速度曲線 何時開始 播放次數 是否反方向 影片起始或結束的狀態 ----------前兩個值必寫（不包含animation-play-state
速度曲線細節:
速度曲線屬性：
linear 勻速
ease 低速開始，加快，結束前變慢
ease-in 以低速開始
ease-out 以低速結束
ease-in-out 影片以低速開始和結束
steps() 指定時間函式中的間隔數量（步長）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/267428.html
標籤：區塊鏈
下一篇：刷題路-金幣