HTML5校企公益課 第三天

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

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。旋轉正方體。

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>3d

title

>

<

style

type

="text/css"

>

html

body

/*定義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想象成一個大盒子。。。