純粋な CSS+DIV で「シンプソンズ」のホーマーのイメージのアニメーション デモンストレーションを描画_html/css_WEB-ITnose

2 年ほど前に CSS を使用して SIGT のロゴをデザインして以来、CSS で Verdana フォントと絶対配置テクノロジーを使用すると、より複雑なパターンを描画できるというアイデアが常に頭の中にありました。つまり、HTML コードを使用して埋め込みベクトル グラフィックスを直接生成します。

漫画番組「ザ・シンプソンズ」のホーマーの画像を代表として描くことにしました。彼の画像は非常に人気があり、誰もが知っているからです。

O

O

O

L

(

O

O

O

O

O

L

(

O

|

|

8

o

o

o

(

(

8

o

o

o

o

)

)

b

o

O

o

お

お

お

お

お

)

b

o

O

o

o

o

o

o

o

o

お

お

/

/

/

•

•

•

•

•

_

_

_

•

•

•

C

C

O

(

–

This描画テクニック 以下のブラウザで試してみました:

Internet Explorer 5.5、6、7

Opera 9

Firefox 2

Safari 3

お使いのコンピュータの場合正しく表示されない場合は、Linux を使用していて、そこに Verdana フォントが含まれていない可能性があります。このフォントは msttcorefonts からダウンロードできます。

描画プロセスのアニメーション デモンストレーション

以下は、ホーマーのイメージがストロークごとにどのように作成されるかを示すアニメーションです。このアニメーション プロセスは、Román Cortés の優れたオリジナル作品を一切変更していません。ただ、内部の div タグに id 属性を追加し、jQuery を使用してそれらを順番に表示し、さまざまな部分がどのように組み合わされているかを確認できるようにしています。少しずつ。 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

お

お

お

お

お

お

お

お

お

お

お

/

/

/

•

•

•

•

•

_

_

_

•

•

•

C

C

O

(

–

以下の按钮は、你選択アニメの放送速度です。