マルチラインCSS専用タイプライター効果

後、別の1つを行う:マルチラインタイプライター.
CSSのみの解決策
効果は、モノススペースフォントを使用し、文字の数を知るに依存します.はい、私は欠点から始めていますが、それは一般的で使いやすいコードの価格でした.
HTMLはとても基本的です.

This is a <span class="type" style="--n:53">CSS only solution for a multi-line typewriter effect.</span>

私たちのテキストと変数として文字の数とスパン.
CSSの場合:

.type {
  font-family: monospace;
  color:#0000;
  background:
    linear-gradient(-90deg,#00DFFC 5px,#0000 0) 10px 0,
    linear-gradient(#00DFFC 0 0) 0 0;
  background-size:calc(var(--n)*1ch) 200%;
  -webkit-background-clip:padding-box,text;
  background-clip:padding-box,text;
  background-repeat:no-repeat;
  animation: 
    b .7s infinite steps(1),   
    t calc(var(--n)*.3s) steps(var(--n)) forwards;
}
@keyframes t{
  from {background-size:0 200%}
}
@keyframes b{
  50% {background-position:0 -100%,0 0}
}

ハードコード化された値を持つCSSコードのいくつかの行.変数を更新するだけです--n .

どうやって動くの?
すべてのトリックは、私が常にこの記事を推薦する参照としてバックグラウンド特性に頼ります:

All you need to know about background-position

Temani Afif for This is Learning ・ Mar 13 ・ 12 min read

#webdev #tutorial #beginners #css

つの背景層があります.最初の層はテキストを色します、そして、2番目は1が点滅するキャレットをつくるでしょう.
最初の層のアイデアは、離散的なアニメーションを適用することですbackground-size グラデーション着色を使用して、最初の文字から最後の1つまでの塗りつぶし効果を作成します.
ここでは、トリックを理解するステップバイステップのイラストです:
番目の層は私たちのキャレットです.ここで2つのアニメーションを実行します.最初のものはbackground-size キャレットがテキストに従う必要があるので、アニメーションはテキスト着色に類似しています.つ目はbackground-position アニメーション点滅効果を作成します.
理解するもう一歩
キャレットの幅は5px 勾配の内側に小さなオフセットを追加します(10px ) テキストアニメーションとの重複を避けるために.
それだ!単純に両方の層が同時にアニメーションを想像し、我々はCSSのみのタイプライターの効果があります.
✔️ JavaScriptなし
✔️ 基本HTMLコード
✔️ 複雑なCSSコードはありません.10未満の宣言とハードコード化された値
✔️ アクセスできます.テキストはHTMLコード内に書き込まれます(擬似要素はなく、重複したテキストはありません)
❌ 単一空間フォントを必要とする
⚠️ コードを変更せずに任意のテキストを使用することができますが