本來想多做幾個了 無奈最近太忙 於是模仿做了乙個在codepen看到的聖誕雪景球 算是送給自己的聖誕禮物
想看原文的位址在這裡
1
<
html
lang
="en"
>
2<
head
>
3<
meta
charset
="utf-8"
>
4<
title
>css動畫聖誕雪景球
title
>
5<
embed
src="age/sd.***"
autostart
="true"
loop
="-1"
controls
="controlpanel"
width
="0"
height
="0"
>
6<
style
type
="text/css"
>
7@charset "utf-8";
8body
11ul,ol,li
14body,div,ul,li,p
15img
16.snow_globe
22.circular_white
29.cir_cen
40.step
49.son_btm
59.son_top
68.eye
78.eye_2
88.nose
100.scarf
111.scarf_2
123.hat
134.hat_2
143.ribbon
152.hat_3
163.shape
174.shape_1
184185
186.snowflake
189190
.snow
200/*
雪花是胡亂寫的... 這個方法模仿自
*/201
.snow_1
210211
.snow_2
219220
@keyframes sfanim
225100%
229}
230231
@-webkit-keyframes sfanim
236100%
240}
241.toum
249250
.arch
261.arch_1
270.arch_2
279.shadow
288style
>
289head
>
290<
body
>
291<
div
class
="snow_globe"
>
292<
div
class
="circular_white"
>
div>
293<
div
class
="cir_cen"
>
294<
div
class
="step"
>
div>
295div
>
296<
div
class
="snowman"
>
297<
div
class
="son_btm"
>
div>
298<
div
class
="son_top"
>
div>
299<
div
class
="shape"
>
div>
300<
div
class
="shape_1"
>
div>
301<
div
class
="hat"
>
302<
div
class
="hat_2"
>
div>
303<
div
class
="ribbon"
>
div>
304<
div
class
="hat_3"
>
div>
305div
>
306<
div
class
="eye"
>
div>
307<
div
class
="eye_2"
>
div>
308<
div
class
="nose"
>
div>
309<
div
class
="scarf"
>
div>
310<
div
class
="scarf_2"
>
div>
311div
>
312<
div
class
="snowflake"
>
313<
div
class
="snow"
>
314<
div
class
="snow_1"
>
315<
p>*
p>
316div
>
317<
div
class
="snow_2"
>
318<
p>*
p>
319div
>
320div
>
321div
>
322<
div
class
="toum"
>
div>
323<
div
class
="arch"
>
324<
div
class
="arch_1"
>
div>
325<
div
class
="arch_2"
>
div>
326div
>
327<
div
class
="shadow"
>
div>
328div
>
329330
body
>
331html
>
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...
CSS3 總結（二十） 彈性盒子（CSS3）
2.在彈性容器中可以設定min width max width屬性來限制彈性子元素的最小及最大縮放寬度。用在彈性容器 3.flex direction 屬性 用在彈性容器 指定了彈性子元素在父容器中的位置。值說明 row橫向從左到右排列 左對齊 預設的排列方式。row reverse 反轉橫向排列 ...
css3新動 css3新增動畫
1 transiition過渡 樣式改變就會執行transition 1 格式 transiition 1s width linear,2s 1s height 2 引數 transition property 要運動的樣式 all attr none transition duration 運動時...