CSSのスクラブルライター

古典的なタイプライターとその点滅キャレットの疲れを取得?私は、私の『スクラブル』ライターで救出にここにいます.あなたのテキストを入力するための新しい革新的な方法.
Impressのような予期しないアニメーションであなたの訪問者!


See the Demo
HTMLコードはかなり基本的です.CSS変数を調整するのに必要なのは、文字数やfont-sizeです.

<span class="scrabble"><span>CSS</span></span>
<span class="scrabble"><span>is</span></span>
<span class="scrabble animate" style="--n:5"><span>crazy</span></span>

簡単に任意のテキストをアニメーション化できます.
ps:“再表示”ボタンをクリックして再びアニメーションを見て
前のイベントの簡単な概要
CSSのみのタイプライターで戦争を開始した.

Typewriter Effect with CSS

Alvaro Montoro ・ Aug 27 ・ 3 min read

#css #html

私は、私の「単純なコード」実装で答えました

A scalable CSS only Typewriter Effect

Temani Afif ・ Aug 28 ・ 5 min read

#css #html #webdev #beginners

彼は、漫画0 -要素バージョンで反撃します

Animated no-element typewriter

Alvaro Montoro ・ Aug 29 ・ 1 min read

#css #html #webdev #art

もう一人の戦士
SVGバージョンで私たちを倒そうとしています!

A Typewriter, but with no HTML, CSS, or JS?!

Timothy Foster ・ Aug 29 ・ 2 min read

#codepen #svg #html

しかし、私は私の秘密兵器:ここでスクラブルライターです!