当前位置:Gxlcms > html代码 > 纯CSS+DIV绘出《辛普森一家》中荷马形象动画演示_html/css_WEB-ITnose

纯CSS+DIV绘出《辛普森一家》中荷马形象动画演示_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:72人阅读

自从大概两年前用CSS给SIGT设计了logo后,我心里一直有个想法,我认为使用Verdana字体和CSS里的绝对定位技术能画出更复杂的图案,也就是说,直接用HTML代码生成嵌入式的矢量图。

我选择绘制卡通剧《 辛普森一家》里的 荷马形象为代表,因为他的形象很流行,大家都认识:

o

o

o

o

(

O

O

O

\

L

(

O

O

O

O

O

\

L

(

O

|

|

\

\

|

|

\

\

\

\

(

(

8

o

o

o

(

(

8

o

o

o

o

)

)

b

o

O

o

o

o

o

o

o

)

b

o

O

o

o

o

o

o

o

o

o

o

/

/

/

_

_

_

C

C

O

(

这种绘制技术是各种浏览器都兼容的,我在下面这些浏览器中都试过:

  • Internet Explorer 5.5, 6 和 7
  • Opera 9
  • Firefox 2
  • Safari 3

如果在你的电脑上没有正确的显示,那有可能是你使用linux,里面没有Verdana字体,你可以从 msttcorefonts下载这个字体。

动画演示绘制过程

下面是动画演示这个荷马的形象是如何一笔一笔的制作出来的。这个动画演示过程对 Román Cortés的杰出原作没有任何修改,只是在里面的一些 div标签上加了 id属性,然后利用jQuery将它们按顺序显示出来,这样你就能看到它的各个部分是如何一点一点的出现的了。

o

o

o

o

(

O

O

O

\

L

(

O

O

O

O

O

\

L

(

O

|

|

\

\

|

|

\

\

\

\

(

(

8

o

o

o

(

(

8

o

o

o

o

)

)

b

o

O

o

o

o

o

o

o

)

b

o

O

o

o

o

o

o

o

o

o

o

/

/

/

_

_

_

C

C

O

(

下面的按钮是让你选择动画的播放速度。

人气教程排行