一、3d的旋轉
增加了rotatez(); 和 rotate3d(x,y,z,度數)
注:x、y、z 它們是乙個向量值,0是不旋轉,1是旋轉 eg:rotate3d(1,1,0,45deg) 等價於:rotatex(45deg) rotatey(45deg)
二、3d的縮放
增加了 scalez() 和 scale3d(x,y,z)
注:互動時需要把旋轉的x,y再寫一遍,否則會覆蓋。
讓背面不可見: backface-visibility:hidden;
三、景深:近大遠小
perspective景深: 值越大距離越遠 ( 給父元素新增 )
perspective:500px; 900 - 1200
景深的視角:erspective-origin:
中間:center
左上角: left top
右上角:right top
10px 10px
四、css3動畫
第一步:製作關鍵幀
(1)方法
注:(1)方法適用於製作簡單動畫,加瀏覽器字首時把瀏覽器字首加在@後面即可。
(2)方法
注:(2)加定位的位置時,方向要一致
第二步:呼叫關鍵幀:animation: ;復合屬性
簡寫方式:animation: 動畫的名稱 動畫的時間 延遲時間 動畫的型別 動畫迴圈的次數 動畫運動的方向 運動的狀態 動畫停止的狀態;
分開:animation-name動畫的名稱
animation-duration動畫的時間,單位為s(秒),從開始到結束
animation-timing-function動畫的型別
linear:線性過渡,勻速,用的多
ease:平滑過渡(預設值),從低速到加快再減速,用的多
ease-in:由慢到快
ease-out:由快到慢
ease-in-out:由慢到快再到慢
step-start:馬上跳到動畫每一結束楨的狀態,用的多
animation-delay延遲時間,動畫開始前延遲的時間
animation-iteration-count動畫迴圈的次數
寫數字即可,寫幾就迴圈幾次
無限迴圈 infinite
animation-direction動畫運動的方向
normal :正常方向
reverse:反方向執行(從關鍵幀的最後一幀開始往前執行)
alternate:動畫先正常執行再反方向執行,並持續交替執行
alternate-reverse:動畫先反執行再正方向執行,並持續交替執行
animation-play-state運動的狀態
running 運動
paused 暫停
transition 和 animation的區別:
transition需要事件觸發(例如:滑鼠滑過)
animation:自動觸發
寒假學習day18
今天學習了 布局的stretchcolumns 拉伸列 流程 在tablelayout中設定了四個按鈕,接著在最外層的tablelayout中新增以下屬性 android stretchcolumns 1 設定第二列為可拉伸列,讓該列填滿這一行所有的剩餘空間,如下 android id id tab...
前端入門到熟悉day18
陣列操作 array 陣列 物件方法 方法 描述 concat 連線兩個或更多的陣列,並返回結果。join 把陣列的所有元素放入乙個字串。元素通過指定的分隔符進行分隔。pop 刪除並返回陣列的最後乙個元素 push 向陣列的末尾新增乙個或更多元素,並返回新的長度。reverse 顛倒陣列中元素的順序...
python學習 Day18 異常
異常即是乙個事件,該事件會在程式執行過程中發生,影響了程式的正常執行。一般情況下,在python無法正常處理程式時就是發生乙個異常,異常是python物件,表示乙個錯誤,當python指令碼發生異常時我們需要捕獲處理它,否則程式會終止執行。異常處理常用形式 try 正常操作 except 發生異常,...