ホームページ >ウェブフロントエンド >CSSチュートリアル >あなたのウェブサイトのCSSタイプライター効果を作成する方法
あなたのウェブサイトのCSSタイプライター効果を作成する方法
- 尊渡假赌尊渡假赌尊渡假赌オリジナル
- 2025-02-08 10:20:13546ブラウズ
純粋なCSSは、魅力的なタイプライターのテキスト効果を作成します
コアポイント：
- CSS Typewriter Effectは、テキストを徐々に表示することにより、Webサイトのコンテンツをより動的で魅力的にし、ログインページ、個人Webサイト、コードデモンストレーションに使用できます。
- タイプライター効果は、CSS
steps()関数を使用してテキスト要素の幅を0％から100％に変更し、アニメーションを通じてテキストの「プットアウト」のカーソルをシミュレートすることで作成できます。 - タイピング効果は、タイピングアニメーションのステップ数と期間を増やして減少させて、より長いテキストまたは短いテキストに対応することで調整できます。
- タイプライター効果は、点滅するカーソルアニメーションと組み合わせて効果を高めることができ、
border-rightプロパティ、色、フリッカー周波数などを調整することでカーソルをカスタマイズできます。
この記事では、純粋なCSSを使用して、ダイナミックで魅力的なWebサイトテキストタイプライター効果を作成する方法を導きます。
TypewRiter Effectシミュレーションテキストは、あなたの前でリアルタイムで入力するのと同じように、単語ごとに表示されます。
テキストスニペットにタイプライター効果を追加すると、ウェブサイトの訪問者を引き付け、読み続けることに興味を持ち続けることができます。 Typewriter効果は、魅力的なログインページの作成、アクションへの呼びかけ要素、個人Webサイト、コードプレゼンテーションなど、さまざまな目的に使用できます。
タイプライター効果を簡単に作成できます
タイプライター効果を作成することは非常に簡単です。このチュートリアルを理解するには、CSSとCSSアニメーションの基本的な知識が必要です。
タイプライター効果の実用的な原則は次のとおりです。
TypewRiterアニメーションは、CSS- 関数を使用することにより、テキスト要素の幅を0％から100％に徐々に変更し、テキスト要素を表示します。
-
steps()フラッシュアニメーションは、テキストの「プットアウト」のカーソルをシミュレートします。 - TypewRiter Effect Webページを作成します
まず、TypewriterデモのWebページを作成しましょう。タイプライターテキスト用の
コンテナが含まれ、クラス名は：<div>
<code>typed-out
Typewriter Text Containerのスタイルスタイル
<code class="language-html"><!doctype html>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</code> Webページのレイアウトがあるので、「タイプアウト」クラス：のスタイルを
タイプライター効果を効果的にするために、次のことを追加しました。
<div>
<pre class="brush:php;toolbar:false"><code class="language-css">.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}</code></pre>および<p>タイピング効果が開始されるまで、テキストコンテンツが表示されないことを確認してください。 </p>
<ul>
<li>、タイプライターカーソルを作成します。 <code>"overflow: hidden;"
"width: 0;"
タイピングエフェクトを作成する前に、
"border-right: .15em solid orange;"要素のコンテナを作成して追加します。
typed-out表示テキストアニメーションを作成typed-out
display: inline-block;TypewRiterアニメーションは、表示される
<code class="language-css">.container {
display: inline-block;
}</code>cssアニメーションルール：を使用します
<code class="language-html"><!doctype html>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</code>
ご覧のとおり、このアニメーションはすべて、要素の幅を0％から100％に変更することです。 次に、このアニメーションを
クラスに含めて、アニメーションの向きをtyped-outに設定して、アニメーションが終わった後にテキスト要素がforwardsに戻らないようにします。
width: 0
<code class="language-css">.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}</code>タイプライター効果を達成するための手順を追加これまでのところ、私たちのテキストは表示されていますが、テキストの逐語を表示しないスムーズな方法です。これはスタートですが、明らかにタイプライター効果のようには見えません。
このアニメーションがテキスト要素を逐語的または段階的に表示するために（タイプライターのように）段階的に表示するためには、
クラスに含まれるタイピングアニメーションをステップに分割して、タイプアウトのように見えるようにする必要があります。 。これは、css関数が作用する場所です：
typed-outご覧のとおり、csssteps()関数を使用して、タイピングアニメーションを20ステップに分割します。
<code class="language-css">.container {
display: inline-block;
}</code> を長く入力するための手順を調整します
steps()より長いテキストを調整するには、タイピングアニメーションのステップと持続時間を増やす必要があります。
より短いタイピングの手順を調整します
より短いテキストを調整するには、アニメーションのタイピングの手順と期間を短縮する必要があります。
フラッシングカーソルアニメーションを作成および設定
どうやら、元の機械式タイプライターには点滅するカーソルがありませんでしたが、より近代的なコンピューター/ワードプロセッサの点滅するカーソル効果を模倣するために追加することが伝統になりました。点滅するカーソルアニメーションは、静的テキスト要素から刻印されたテキストを際立たせるのに役立ちます。
Typewriterアニメーションに点滅するカーソルアニメーションを追加するには、最初に点滅するアニメーションを作成します。
私たちのウェブページでは、このアニメーションは、透明からオレンジまで
要素の境界（タイプライター効果のカーソルとして使用）の境界色を変更します。このアニメーションをクラスのルールに含め、そのアニメーション方向プロパティを
<code class="language-css">@keyframes typing {
from { width: 0 }
to { width: 100% }
}</code>に設定して、カーソルを消滅させ、0.8秒ごとに無期限に再装着するようにします。
フラッシングタイピング効果を調整するためのコードtyped-out
属性を調整することでカーソルをより薄くするか、厚くすることができます。または、カーソルの色を異なって作成し、typed-outを与え、フリッカー周波数を調整します。 infinite
TypewRiterテキストアニメーションを組み合わせた要素
<code class="language-css">.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation: typing 1s forwards;
}</code> CSSでタイプライター効果を作る方法がわかったので、このタイプライター効果のためにいくつかの実用的で関連するユースケースを示す時が来ました。 結論
この記事では、CSSを使用してアニメーション化された「タイプライター」テキストを作成するのがどれほど簡単かを理解しています。このタイピング効果は、間違いなくあなたのページに楽しく楽しいものを追加することができます。 border-right: .15em solid orange;
しかし、最後には穏やかな警告に値するかもしれません。この手法は、少しだけ楽しみを追加するために、少量の非クリティカルなテキストに使用するのが最適です。ただし、このようなCSSアニメーションを使用することにはいくつかの制限があるため、過度に依存しないように注意しないように注意してください。結果はプラットフォームによって異なる場合があるため、さまざまなデバイスとビューポートサイズでタイプライターテキストをテストしてください。また、支援技術に依存しているエンドユーザーを検討します。理想的には、ユーザーに不便を与えないように、いくつかのユーザビリティテストを実行できます。純粋なCSSで何かをすることができるので、必ずしもあなたがすべきだという意味ではありません。タイプライターの効果があなたにとって重要であり、より重要なコンテンツにそれを使用したい場合は、少なくともJavaScriptソリューションも検討してください。
とにかく、この投稿を楽しんだことを願っています。CSSアニメーションで他にクールなことができることを考えて、ページに楽しく楽しいことを追加します。CSS Typewriter効果の作成に関するよくある質問
最後に、CSSでタイプライター効果を作成する方法に関する最も一般的な質問のいくつかに答えましょう。
- タイプライターの効果は何ですか？
- TypewRiterアニメーションとは何ですか？
- CSSでアニメーションテキストタイピングを作成する方法は？
、animation、@keyframesなど、アニメーションを作成するためのさまざまなツールを提供します。これらのツールは、最初にsteps()属性を介して非表示のテキストを徐々に表示するために使用されます。 overflow
- CSSを使用してカスタマイズ可能なTypewriterアニメーションを作成する方法は？
このCSSコードでは、アニメーションをカスタマイズ可能にするために、カスタムプロパティ（
および
<code class="language-html"><!doctype html>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</code>
--typewriter-text--typewriter-duration
-
typed-outCSS Typewriterアニメーションの要素の最後の文字のカーソルを停止するには、CSSアニメーションと 属性を使用できます。
<code class="language-html"><!doctype html>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</code>
上記のCSSでは、Typewriterアニメーションがコンテナ内の要素の幅を徐々に増加させ、テキストを効果的に入力します。 プロパティは、.typewriterに設定されており、完了後にアニメーションが最終（完全に再生）のままであることを確認します。この設定では、カーソルが完全に印刷された後、animation-fill-mode要素でフラッシュします。 forwards
typed-out
- タイプライター効果を効果的に使用するいくつかのウェブサイトの例は何ですか？
- タイプライターアニメーションは、ポートフォリオサイト、特にデザイナーや開発者のWebサイトなどのサイトでよく使用されます。これは、重要なスキルを強調し、ページに創造的な感覚を追加するために使用され、読者の注意を引き付けます。 Typewriter効果は、ブログのWebサイトやログインページ、製品のデモンストレーションで使用される場合があります。
以上があなたのウェブサイトのCSSタイプライター効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。