ホームページ > 記事 > ウェブフロントエンド > HTML5+CSS3を使って動的にスマイリーフェイスを描画する方法
前回の記事では、HTML5 CSS3を使って象を動的に描画する方法を紹介しましたので、興味のある方はリンクをクリックして→「HTML5 CSS3を使って象を動的に描画する」をご覧ください。 」。今回は引き続き、HTML5 CSS3 を使用してアニメーション効果を実現する方法と、スマイリーフェイスを動的に描画する方法を紹介します。
今日の記事の主な内容は、HTML5のsvgを使ってスマイリーフェイスの線を描き、CSS3を使ってアニメーション効果を加えてゆっくりと描けるようにするというものです。エフェクトが何であるか理解できないかもしれないので、レンダリングを直接見てみましょう: このエフェクトを実現する方法を検討してみましょう:最初にページ全体の背景色、SVG キャンバスのサイズ、線の色を設定します。
body { background: #222; display: flex; height: 100vh; justify-content: center; align-items: center; margin: 0; } svg { display: block; height: 90vmin; width: 90vmin; } .stroke { stroke-width: 1; stroke: #fff; fill: none; }
次に SVG を使用して線スマイルを描画します
<svg viewBox="-50 -50 100 100"> </svg>
<svg viewBox="-50 -50 100 100"> <path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path> </svg>
<svg viewBox="-50 -50 100 100"> <path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path> <path class="stroke" d="M-20 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> </svg>
<svg viewBox="-50 -50 100 100"> <path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path> <path class="stroke" d="M-20 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> <path class="stroke" d="M10 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> </svg>
<svg viewBox="-50 -50 100 100"> <path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path> <path class="stroke" d="M-20 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> <path class="stroke" d="M10 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> <path class="stroke" d="M30 0 a 30 30 0 1 1 -60 0"></path> </svg>
ストローク-linecaps 属性を .ストローク に追加します。要素を変更し、形状を円弧に設定します。
.stroke { stroke-linecap: round; }
OK、笑顔が描かれました。
最後にアニメーション効果を実現します:アニメーションを .ストローク 要素にバインドし、スマイリーフェイスのパターンが最初に非表示になるように、ストローク-ダシャーレイ プロパティとストローク ダッシュオフセット プロパティを設定します
.stroke { animation: stroke-anim 2s linear forwards; stroke-dasharray: 300; stroke-dashoffset: 300; }
@keyframes ルールを使用してアニメーションのアクションを設定し、stroking-dashoffsets 属性の値を 0 に設定して、スマイリーフェイスのパターンがゆっくりと表示されるようにします。
@keyframes stroke-anim { to { stroke-dashoffset: 0; } }
#アニメーション効果は出てきましたが、私たちが望んでいたものではありませんでした。アニメーション遅延を使用して各アクションの開始時間を定義する必要があります。最初に顔を描画し、次に左右の目を描画し、最後に口を描画します。よし、終了!完全なコードを以下に示します。
.stroke:nth-child(2) { animation-delay: 2s; } .stroke:nth-child(3) { animation-delay: 3s; } .stroke:nth-child(4) { animation-delay: 4s; } @keyframes stroke-anim { to { stroke-dashoffset: 0; } }上記のコードを直接コピーして、デモをローカルで実行できます。 主なタグと属性は次のとおりです:
#
要素SVG 画像ベクター画像の構造、描画、レイアウトに適用されるさまざまな要素を使用して作成されます。 svg がルート要素でない場合、svg 要素を使用して、現在のドキュメント (HTML ドキュメントなど) 内に別の svg フラグメントをネストできます。この独立したフラグメントには、独自のビューポートと座標系があります。
animation
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background: #222; display: flex; height: 100vh; justify-content: center; align-items: center; margin: 0; } svg { display: block; height: 90vmin; width: 90vmin; } .stroke { stroke-width: 1; stroke: #fff; fill: none; stroke-linecap: round; animation: stroke-anim 2s linear forwards; stroke-dasharray: 300; stroke-dashoffset: 300; } .stroke:nth-child(2) { animation-delay: 2s; } .stroke:nth-child(3) { animation-delay: 3s; } .stroke:nth-child(4) { animation-delay: 4s; } @keyframes stroke-anim { to { stroke-dashoffset: 0; } } </style> </head> <body> <svg viewBox="-50 -50 100 100"> <path class="stroke" d="M-40 0 a 40 40 0 0 1 80 0 a 40 40 0 0 1 -80 0"></path> <path class="stroke" d="M-20 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> <path class="stroke" d="M10 -20 a 5 5 0 0 1 10 0 a 5 5 0 0 1 -10 0"></path> <path class="stroke" d="M30 0 a 30 30 0 1 1 -60 0"></path> </svg> </body> </html>
/* 定义动画*/ @keyframes 动画名称{ /* 样式规则*/ } /* 将它应用于元素 */ .element { animation-name: 动画名称(在@keyframes中已经声明好的); /* 或使用动画简写属性*/ animation: 动画名称 1s ... }
animation-delay プロパティは、アニメーションの開始時期を定義します。 :nth-child()Selector
PHP 中国語 Web サイト プラットフォームには、多くのビデオ教育リソースがあります。「css ビデオ チュートリアル 」と「HTML ビデオ チュートリアル 」を学習することを歓迎します。
以上がHTML5+CSS3を使って動的にスマイリーフェイスを描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。