あなたのウェブサイトの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>

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

ログイン後にコピー

および

タイピング効果が開始されるまで、テキストコンテンツが表示されないことを確認してください。

、タイプライターカーソルを作成します。 "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でタイプライター効果を作成する方法に関する最も一般的な質問のいくつかに答えましょう。