あなたのウェブサイトのCSSタイプライター効果を作成する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

あなたのウェブサイトのCSSタイプライター効果を作成する方法

尊渡假赌尊渡假赌尊渡假赌

Feb 08, 2025 am 10:20 AM

純粋なCSSは、魅力的なタイプライターのテキスト効果を作成します

コアポイント：

CSS Typewriter Effectは、テキストを徐々に表示することにより、Webサイトのコンテンツをより動的で魅力的にし、ログインページ、個人Webサイト、コードデモンストレーションに使用できます。
タイプライター効果は、CSS steps()関数を使用してテキスト要素の幅を0％から100％に変更し、アニメーションを通じてテキストの「プットアウト」のカーソルをシミュレートすることで作成できます。
タイピング効果は、タイピングアニメーションのステップ数と期間を増やして減少させて、より長いテキストまたは短いテキストに対応することで調整できます。
タイプライター効果は、点滅するカーソルアニメーションと組み合わせて効果を高めることができ、border-rightプロパティ、色、フリッカー周波数などを調整することでカーソルをカスタマイズできます。

この記事では、純粋なCSSを使用して、ダイナミックで魅力的なWebサイトテキストタイプライター効果を作成する方法を導きます。

TypewRiter Effectシミュレーションテキストは、あなたの前でリアルタイムで入力するのと同じように、単語ごとに表示されます。

How to Create a CSS Typewriter Effect for Your Website

テキストスニペットにタイプライター効果を追加すると、ウェブサイトの訪問者を引き付け、読み続けることに興味を持ち続けることができます。 Typewriter効果は、魅力的なログインページの作成、アクションへの呼びかけ要素、個人Webサイト、コードプレゼンテーションなど、さまざまな目的に使用できます。

タイプライター効果を簡単に作成できます

タイプライター効果を作成することは非常に簡単です。このチュートリアルを理解するには、CSSとCSSアニメーションの基本的な知識が必要です。

タイプライター効果の実用的な原則は次のとおりです。

TypewRiterアニメーションは、CSS

steps()フラッシュアニメーションは、テキストの「プットアウト」のカーソルをシミュレートします。

まず、TypewriterデモのWebページを作成しましょう。タイプライターテキスト用の

コンテナが含まれ、クラス名は

：<div> <code>typed-out Typewriter Text Containerのスタイルスタイル

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

Webページのレイアウトがあるので、「タイプアウト」クラス：

のスタイルを

タイプライター効果を効果的にするために、次のことを追加しました。 <div> <pre class='brush:php;toolbar:false;'>.typed-out { overflow: hidden; border-right: .15em solid orange; font-size: 1.6rem; width: 0; }</pre>および<p>タイピング効果が開始されるまで、テキストコンテンツが表示されないことを確認してください。 </p> <ul> <li>、タイプライターカーソルを作成します。 <code>"overflow: hidden;" "width: 0;" タイピングエフェクトを作成する前に、

要素の最後の文字が完全にタイピングしている後にカーソルを停止するために（タイプライターやワードプロセッサなど）、"border-right: .15em solid orange;"要素のコンテナを作成して追加します。

：

typed-out表示テキストアニメーションを作成typed-out display: inline-block;TypewRiterアニメーションは、表示される

要素内のテキストの逐語的効果を作成します。

.container {
  display: inline-block;
}

cssアニメーションルール：

を使用します

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

ご覧のとおり、このアニメーションはすべて、要素の幅を0％から100％に変更することです。

次に、このアニメーションを

クラスに含めて、アニメーションの向きをtyped-outに設定して、アニメーションが終わった後にテキスト要素がforwardsに戻らないようにします。 width: 0

テキスト要素は左から右に滑らかに表示されます。

.typed-out {
  overflow: hidden;
  border-right: .15em solid orange;
  font-size: 1.6rem;
  width: 0;
}

タイプライター効果を達成するための手順を追加

これまでのところ、私たちのテキストは表示されていますが、テキストの逐語を表示しないスムーズな方法です。これはスタートですが、明らかにタイプライター効果のようには見えません。

このアニメーションがテキスト要素を逐語的または段階的に表示するために（タイプライターのように）段階的に表示するためには、

クラスに含まれるタイピングアニメーションをステップに分割して、タイプアウトのように見えるようにする必要があります。。これは、css

関数が作用する場所です：

typed-outご覧のとおり、csssteps()関数を使用して、タイピングアニメーションを20ステップに分割します。

.container {
  display: inline-block;
}

を長く入力するための手順を調整します steps()より長いテキストを調整するには、タイピングアニメーションのステップと持続時間を増やす必要があります。

より短いタイピングの手順を調整します

より短いテキストを調整するには、アニメーションのタイピングの手順と期間を短縮する必要があります。

フラッシングカーソルアニメーションを作成および設定

どうやら、元の機械式タイプライターには点滅するカーソルがありませんでしたが、より近代的なコンピューター/ワードプロセッサの点滅するカーソル効果を模倣するために追加することが伝統になりました。点滅するカーソルアニメーションは、静的テキスト要素から刻印されたテキストを際立たせるのに役立ちます。

Typewriterアニメーションに点滅するカーソルアニメーションを追加するには、最初に点滅するアニメーションを作成します。

私たちのウェブページでは、このアニメーションは、透明からオレンジまで

要素の境界（タイプライター効果のカーソルとして使用）の境界色を変更します。

このアニメーションをクラスのルールに含め、そのアニメーション方向プロパティを

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

に設定して、カーソルを消滅させ、0.8秒ごとに無期限に再装着するようにします。

フラッシングタイピング効果を調整するためのコードtyped-out

属性を調整することでカーソルをより薄くするか、厚くすることができます。または、カーソルの色を異なって作成し、typed-outを与え、フリッカー周波数を調整します。 infinite TypewRiterテキストアニメーションを組み合わせた要素

.typed-out{
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    font-size: 1.6rem;
    width: 0;
    animation: typing 1s forwards;
}

CSSでタイプライター効果を作る方法がわかったので、このタイプライター効果のためにいくつかの実用的で関連するユースケースを示す時が来ました。

結論

この記事では、CSSを使用してアニメーション化された「タイプライター」テキストを作成するのがどれほど簡単かを理解しています。このタイピング効果は、間違いなくあなたのページに楽しく楽しいものを追加することができます。 border-right: .15em solid orange;

しかし、最後には穏やかな警告に値するかもしれません。この手法は、少しだけ楽しみを追加するために、少量の非クリティカルなテキストに使用するのが最適です。ただし、このようなCSSアニメーションを使用することにはいくつかの制限があるため、過度に依存しないように注意しないように注意してください。結果はプラットフォームによって異なる場合があるため、さまざまなデバイスとビューポートサイズでタイプライターテキストをテストしてください。また、支援技術に依存しているエンドユーザーを検討します。理想的には、ユーザーに不便を与えないように、いくつかのユーザビリティテストを実行できます。純粋なCSSで何かをすることができるので、必ずしもあなたがすべきだという意味ではありません。タイプライターの効果があなたにとって重要であり、より重要なコンテンツにそれを使用したい場合は、少なくともJavaScriptソリューションも検討してください。

とにかく、この投稿を楽しんだことを願っています。CSSアニメーションで他にクールなことができることを考えて、ページに楽しく楽しいことを追加します。

CSS Typewriter効果の作成に関するよくある質問

最後に、CSSでタイプライター効果を作成する方法に関する最も一般的な質問のいくつかに答えましょう。

タイプライターの効果は何ですか？

「Typewriter Effect」は、タイプライターによってリアルタイムで入力されているかのように、画面上の単語ごとにテキストを単語ごとに表示するアニメーションテクニックです。この効果は通常JavaScriptで作成されますが、この記事に示すように、CSSのみを使用して実装することもできます。

TypewRiterアニメーションとは何ですか？

タイプライターはテキストを一度に1文字ずつ印刷します。 Typewriterアニメーションは、タイプライターのタイピングを模倣し、テキストを一度に1つの文字で提示するアニメーションです。これは、多くのWebページで人気のあるアニメーション効果です。

CSSでアニメーションテキストタイピングを作成する方法は？

最新のCSSは、

、animation、@keyframesなど、アニメーションを作成するためのさまざまなツールを提供します。これらのツールは、最初にsteps()属性を介して非表示のテキストを徐々に表示するために使用されます。 overflow

CSSを使用してカスタマイズ可能なTypewriterアニメーションを作成する方法は？

CSSを使用したカスタマイズ可能なTypewRiterアニメーションの作成には、キーフレームとCSSプロパティを使用して、画面上で入力するときのテキストの外観と動作を制御することが含まれます。いくつかのアニメーションパラメーターをCSS変数（カスタムプロパティ）として公開することでカスタマイズ可能にすることができ、スタイルシートで簡単に変更できるようにします。たとえば、

このCSSコードでは、アニメーションをカスタマイズ可能にするために、カスタムプロパティ（および

）を定義します。これらのプロパティを変更することにより、デフォルト値を変更できます。

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

--typewriter-text--typewriter-duration

要素の最後の文字が完全に印刷された後、カーソルを停止する方法は？

typed-out CSS Typewriterアニメーションの要素の最後の文字のカーソルを停止するには、CSSアニメーションと

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

プロパティは、.typewriterに設定されており、完了後にアニメーションが最終（完全に再生）のままであることを確認します。この設定では、カーソルが完全に印刷された後、animation-fill-mode要素でフラッシュします。 forwards typed-out

以上があなたのウェブサイトのCSSタイプライター効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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