HTML5校企公益課 第三天

2022-01-19 01:02:26 字數 2231 閱讀 3701

1、上午2d。旋轉變色的。。。

基本思路就是先寫靜態畫面然後新增動畫。

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>2d動畫

title

>

<

style

>

/*根據id獲取 選擇器 #id名,根據class名 .class名

*/.classa

/*轉動的圓

*/.classb

/*設定動畫

*/@keyframes xuanzhuan

/*設定結束狀態 scale縮放 translate平移 傾斜 skew

*/50%

100%

}

@keyframes changecolor

10%20%

30%40%

50%60%

70%80%

90%100%

}

style

>

head

>

<

body

>

<

div

id="aa"

, class

="classa"

>

div>

<

div

id="bb"

, class

="classb"

>

div>

body

>

html

>

2、下午3d。旋轉正方體。

/*定義section容器的大小顏色

*/section

@keyframes xuanzhuan

to }

/*對每乙個div統一設定樣式

*/div

.front

.back

/*旋轉的時候座標軸也會跟著旋轉

*/.left

.right

.top

.down

style

>

head

>

<

body

>

<

section

>

<

div

class

="front"

>

div>

<

div

class

="back"

>

div>

<

div

class

="left"

>

div>

<

div

class

="right"

>

div>

<

div

class

="top"

>

div>

<

div

class

="down"

>

div>

section

>

body

>

html

>

要把section想象成乙個大盒子。。。

Html大家庭的第三天

width height border bordercolor cellspacing cellpadding align center left right valign top bottom middle rowspan colspan 2 表單 收集使用者資訊 form 屬性 action n...

h5學習(css第三天)

今日所學 盒模型 最終結果可以做到 d1 d2 d3 d4 d5 d6 d7 強調border元素對margin元素的影響,若忽略border元素會導致margin元素脫離上一級的束縛 先是對文件的編輯,包括一些盒模型技巧 在這裡插入描述 關於盒模型 乙個元素在頁面中真實佔據的位置叫做盒模型。mar...

第三課 Html5背景屬性 背景和漸變

1 背景屬性複習 background image background color background repeat background position background attachment 2 新增屬性 background size background size x y 水平 垂...