HTML5+CSS3を使って動的にスマイリーフェイスを描画する方法-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5+CSS3を使って動的にスマイリーフェイスを描画する方法

青灯夜游

Aug 31, 2021 am 11:34 AM

css3 html5 svg アニメーション

前回の記事では、HTML5 CSS3を使って象を動的に描画する方法を紹介しましたので、興味のある方はリンクをクリックして→「HTML5 CSS3を使って象を動的に描画する」をご覧ください。」。今回は引き続き、HTML5 CSS3 を使用してアニメーション効果を実現する方法と、スマイリーフェイスを動的に描画する方法を紹介します。

今日の記事の主な内容は、HTML5のsvgを使ってスマイリーフェイスの線を描き、CSS3を使ってアニメーション効果を加えてゆっくりと描けるようにするというものです。エフェクトが何であるか理解できないかもしれないので、レンダリングを直接見てみましょう:

HTML5+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 タグを定義し、現在のドキュメントに独立した 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>

ログイン後にコピー

HTML5+CSS3を使って動的にスマイリーフェイスを描画する方法

パスタグを使用して左側に目を描きます

<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>

ログイン後にコピー

HTML5+CSS3を使って動的にスマイリーフェイスを描画する方法

右目も描きます

<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>

ログイン後にコピー

HTML5+CSS3を使って動的にスマイリーフェイスを描画する方法

<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>

ログイン後にコピー

HTML5+CSS3を使って動的にスマイリーフェイスを描画する方法ストローク-linecaps 属性を .ストロークに追加します。要素を変更し、形状を円弧に設定します。

.stroke {
  stroke-linecap: round;
}

ログイン後にコピー

HTML5+CSS3を使って動的にスマイリーフェイスを描画する方法 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;
  }
}

ログイン後にコピー

#アニメーション効果は出てきましたが、私たちが望んでいたものではありませんでした。アニメーション遅延を使用して各アクションの開始時間を定義する必要があります。最初に顔を描画し、次に左右の目を描画し、最後に口を描画します。よし、終了！完全なコードを以下に示します。 HTML5+CSS3を使って動的にスマイリーフェイスを描画する方法

.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;
  }
}

ログイン後にコピー

上記のコードを直接コピーして、デモをローカルで実行できます。

主なタグと属性は次のとおりです:

HTML5+CSS3を使って動的にスマイリーフェイスを描画する方法

要素

SVG 画像ベクター画像の構造、描画、レイアウトに適用されるさまざまな要素を使用して作成されます。 svg がルート要素でない場合、svg 要素を使用して、現在のドキュメント (HTML ドキュメントなど) 内に別の svg フラグメントをネストできます。この独立したフラグメントには、独自のビューポートと座標系があります。

パス

パス要素は、形状を定義するために使用される一般的な要素です。すべての基本的な形状は path 要素を使用して作成できます。 SVG 要素は、塗りつぶしの有無にかかわらず、線、円弧、曲線などで構成される高度な形状を描画するために使用されます。要素は、おそらくすべての要素の中で最も高度で多用途な 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>

ログイン後にコピー

animation プロパティは省略表現のプロパティです。設定に使用できるアニメーションプロパティは 6 つあります。
```
/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}
```
ログイン後にコピー
animation-delay
プロパティは、アニメーションの開始時期を定義します。このプロパティの値は秒またはミリ秒で測定されます。負の値は許可されます。-2s を指定するとアニメーションがすぐに開始されますが、アニメーションに入るまでの 2 秒がスキップされます。
- :nth-child()Selector
  :nth-child(n) セレクターは、親要素の n 番目の子要素と一致します。要素の種類に制限はありません。
  n には、数値、キーワード、または数式を指定できます。
PHP 中国語 Web サイトプラットフォームには、多くのビデオ教育リソースがあります。「css ビデオチュートリアル」と「HTML ビデオチュートリアル」を学習することを歓迎します。
以上がHTML5+CSS3を使って動的にスマイリーフェイスを描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。