前端學習Day18

2021-10-05 01:26:20 字數 1925 閱讀 3212

一、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 發生異常,...