SVG のダッシュアニメーションを使用して手描きのテキストアニメーション効果を作成する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

SVG のダッシュアニメーションを使用して手描きのテキストアニメーション効果を作成する方法

Barbara Streisand

Nov 30, 2024 am 03:30 AM

How to Create a Hand-Drawn Text Animation Effect Using SVG's Dash Animation?

SVG を使用して Web ページ上の手書きテキストをアニメーション化する方法?

問題ステートメント:

SVGとして保存したテキストをアニメーション化しようとしていますが、ストロークをアニメートすることしかできませんが、これは望ましい効果ではありません。あなたは、手描きの外観を作成する、指定された例と同様のアニメーションを実装したいと考えています。これまでの内容は次のとおりです:

コードサンプル:

<div>

.test {
  width: 300px;
}

.l1 {
  animation: dash 15s 1;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation-fill-mode: forwards;
}

.l2 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 20s linear forwards;
  animation-delay: 1s;
}

.l3 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 2.5s;
}

.l4 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 4.5s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

答え:

アニメーション達成しようとしているのは、標準のダッシュアニメーション技術を使用していますが、アニメーション化されたストロークを次のようなアウトラインでクリップします。

ダッシュアニメーションテクニック:

次のような標準的な線:

<path d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>

は、値を制御することによってアニメーション化されます。キーフレーム内のストローク-ダシャアレイとストローク-ダシャオフセットのanime.

.path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 15s 1;
  animation-fill-mode: forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

この例では、ストローク-dasharray プロパティはパスに沿ったダッシュとギャップの長さを定義し、ストローク-dashoffset はパス内のダッシュのオフセットを定義します。アニメーションが 0% から 100% に進むにつれて、ストロークダッシュオフセット値が減少し、パスに沿ってダッシュが徐々に表示されます。

手描きの外観の作成:

アニメーション化されたストロークをアウトラインでクリップするには、アニメーション化されたストロークの幅と色に一致するストロークで追加の SVG パスが使用されます。このアウトラインパスは、アニメーション化されたストロークが占める領域全体をカバーする必要があります。アウトラインのストローク-ラインジョインプロパティをマイターに定義することで、角の立ったスタイルが作成され、手描きのような印象を与えます。

以上がSVG のダッシュアニメーションを使用して手描きのテキストアニメーション効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undress AI Tool

脱衣画像を無料で

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

PHP チュートリアル

1528

276

Related knowledge

一般的なCSSブラウザの矛盾とは何ですか？ Jul 26, 2025 am 07:04 AM

さまざまなブラウザのCSS解析に違いがあるため、主にデフォルトのスタイルの違い、ボックスモデルの計算方法、フレックスボックスおよびグリッドレイアウトサポートレベル、および特定のCSS属性の一貫性のない動作を含む一貫性のないディスプレイ効果が得られます。 1.デフォルトのスタイル処理は一貫性がありません。解決策は、cssresetまたはremormize.cssを使用して初期スタイルを統合することです。 2。IEの古いバージョンのボックスモデル計算方法は異なります。 Box-Sizing：Border-Boxを統一された方法で使用することをお勧めします。 3. FlexBoxとグリッドは、エッジの場合や古いバージョンでは異なる機能を示します。より多くのテストを行い、Autoprefixerを使用します。 4.一部のCSS属性の動作は一貫性がありません。 Caniuseは相談して格下げする必要があります。

アクセントカラーのプロパティとは何ですか？ Jul 26, 2025 am 09:25 AM

Accent-Colorは、CSSで使用される属性であり、チェックボックス、ラジオボタン、スライダーなどのフォーム要素のハイライト色をカスタマイズします。 1.チェックボックスの青いチェックマークを赤に変更するなど、フォームコントロールの選択した状態のデフォルト色を直接変更します。 2。サポートされている要素には、type = "チェックボックス"、type = "Radio"、type = "range"の入力ボックスが含まれます。 3.アクセントカラーを使用すると、複雑なカスタムスタイルと余分なDOM構造を回避し、ネイティブアクセシビリティを維持できます。 4.一般的に最新のブラウザによってサポートされており、古いブラウザを格下げする必要があります。 5. Accent-Colを設定します

「垂直アライグル」プロパティとその典型的なユースケースを説明してください Jul 26, 2025 am 07:35 AM

thevertical-AlignPropertyincsSalignSinlineortable-cellElementsive.1.ItadjustsemageSlikeImagesSwitSwitSwithinputswithintingtlinessingVaseLine、Middle、super、andsub.2.IntableCells、ItControlScontEntalInmentWithop、Middle、Orbottomvalues、頻繁に

CSSのテキスト色を変更する方法は？ Jul 27, 2025 am 04:25 AM

CSSのテキスト色を変更するには、色属性を使用する必要があります。 1。色属性を使用して、テキストの前景色を設定し、色名（赤など）、16進コード（＃FF0000など）、RGB値（RGB（255,0,0）など）、HSL値（HSL（0,100％、50％）など）、RGBAまたはHSLAを使用してRGBAまたはHSLA 2. H1からH6タイトル、パラグラフP、リンクAなどのテキストを含む任意の要素に色を適用できます（a：link、a：a：a：hover、a：active、div、spanなどの異なる状態の色設定に注意してください）。 3。最も

未使用のCSSをパージする方法は？ Jul 27, 2025 am 02:47 AM

useautomatedtoolslikepurgecssoruncsStoscanandRemoveUnusedcss; ’scontentConfiguration; 3.OuditcsSusageWithRedevtoolScoveragetabbeavePurgingToavoidRemovingedStyles; 4.SafelistDynamic

CSSダークモードのトグル例 Jul 30, 2025 am 05:28 AM

まず、JavaScriptを使用して、ユーザーシステムの設定とローカルに保存されたテーマ設定を取得し、ページテーマを初期化します。 1. HTML構造には、トピックの切り替えをトリガーするボタンが含まれています。 2。CSSの使用：rootは明るいテーマ変数を定義し、.dark-modeクラスは暗いテーマ変数を定義し、これらの変数をvar（）を介して適用します。 3. JavaScript検出は、カラーのスchemeを好み、LocalStorageを読み取り、最初のテーマを決定します。 4.ボタンをクリックするときにHTML要素のダークモードクラスを切り替え、現在の状態をLocalStorageに保存します。 5.すべての色の変更には、ユーザーを強化するために0.3秒の移行アニメーションが伴います

CSSバックドロップフィルタープロパティを使用する方法は？ Aug 02, 2025 pm 12:11 PM

バックドロップフィルターは、要素の背後にあるコンテンツに視覚効果を適用するために使用されます。 1。バックドロップフィルター：Blur（10px）およびその他の構文を使用して、つや消しガラス効果を実現します。 2。ぼやけ、明るさ、コントラストなどの複数のフィルター関数をサポートし、重ねることができます。 3.ガラスカードの設計でよく使用されており、要素が背景と重複するようにする必要があります。 4.最新のブラウザには優れたサポートがあり、@Supportsを使用してダウングレードソリューションを提供できます。 5。パフォーマンスを最適化するために、過度のぼかしと頻繁な再描画を避けてください。この属性は、要素の背後にコンテンツがある場合にのみ有効になります。

CSSアスペクト比プロパティとの使用方法は何ですか？ Aug 04, 2025 pm 04:38 PM

Theaspect-ratioCSSpropertydefinesthewidth-to-heightratioofanelement,ensuringconsistentproportionsinresponsivedesigns.1.Itisapplieddirectlytoelementslikeimages,videos,orcontainersusingsyntaxsuchasaspect-ratio:16/9.2.Commonusecasesincludemaintainingres

See all articles

SVG のダッシュ アニメーションを使用して手描きのテキスト アニメーション効果を作成する方法