WEB前端初學者筆記(9) 2D與3D

2022-09-10 11:15:16 字數 3649 閱讀 3813

transform 屬性向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

部分效果**如下23

31允許您改變被轉換元素的位置,也就是元素發生改變的時候的中心點

2d 轉換元素能夠改變元素 x 和 y 軸。3d 轉換元素還能改變其 z 軸。

transition 屬性是乙個簡寫屬性,用於設定四個過渡屬性:

**如下:23

39animation 屬性是乙個簡寫屬性,用於設定六個動畫屬性:

通常animation和@keyframes是連用的, 定義的animationname被animation引用,然後實現動畫效果 **如

開始*/

1350%

14to15​

16/*

結束*/17​

18}19#div1

25style

>

26head

>

27<

body

>

28<

div

id="div1"

>29​

30div

>

31body

>

32html

>

33通過 @keyframes 規則,您能夠建立動畫。

建立動畫的原理是,將一套 css 樣式逐漸變化為另一套樣式。

在動畫過程中,您能夠多次改變這套 css 樣式。

0% 是動畫的開始時間,100% 動畫的結束時間。

為了獲得最佳的瀏覽器支援,您應該始終定義 0% 和 100% 選擇器。

初學者web前端學習筆記

對於 if 語句括號裡的表示式,ecmascript 會自動呼叫boolean 轉型函式將這個表示式的結果轉換成乙個布林值。如果值為 true,執行後面的一條語句,否則不執行。通過arguments 物件的length屬性,來智慧型的判斷有多少引數,然後把引數進行合理的應用 比如,要實現乙個加法運算...

WEB前端初學者筆記(16) 表單事件

在j ascript中,常用的表單事件有3種。onfocus表示獲取焦點時觸發的事件,而onblur表示失去焦點時觸發的事件,兩者是相反操作。onfocus和onblur這兩個事件往往都是配合一起使用的。例如使用者準備在文字框中輸入內容時,此時它會獲得游標,就會觸發onfocus事件。當文字框失去游...

初學者應該如何學習web前端

優秀的前端開發工程師要在知識體系上要有廣度和深度,要具備快速學習的能力。前端開發工程師不僅要掌握基本的web前端開發技術,效能優化 及一些基礎知識,而且要學會運用各種工具進行輔助開發以及理論層面的知識,包括 的可維護性 分層語義模板和瀏覽器分級支援等。新手學習前端的話,一定要想想為什麼要學習它,是出...