CSS3 を使用して入力効果をシミュレートする (コード例)

この記事では、CSS3 を使用して中国語/英語の入力効果をシミュレートする方法をコード例を通して紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#推奨:

css ビデオ チュートリアル

##1. CSS3 を使用して入力効果を実現する原則 入力の効果をシミュレートするには、文字を 1 つずつ徐々に表示する必要があります。

ここでは、コンテナの幅を変更することで、コンテナの幅が0から徐々に増加します。増加する幅が各文字の幅となり、タイピングの効果をシミュレートできます。

本物らしさを高めるために、カーソルの点滅効果を追加して、入力効果をより適切にシミュレートできます。

#実装するポイント:

#CSS を使ってテキストコンテナの幅を徐々に広げる方法

• #コンテナの幅を各文字の幅と同じ幅に増やす方法

• カーソルの点滅効果をシミュレートする方法

• 対応する実装方法:

CSS3 でアニメーションを使用してアニメーション効果を実現します

• 次のステップを使用しますステップバイステップのアニメーションを実装するためのアニメーション

• テキスト コンテナの右側の境界アニメーションを使用して、カーソルの点滅効果を実現します

• # 2. 実装

#1. 英語入力効果

html：

<h1>A miss is as good as a mile.</h1>

css 実装:

@keyframes typing {
    from { width: 0}
}
@keyframes blink-caret {
    50% { border-color: transparent; }
}
 
h1 {
    font: 200% monospace;
    border-right: .08em solid;
    width: 28ch;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 10s steps(28, end),
               blink-caret .5s step-end infinite alternate; //这里的alternate是为了让光标闪烁的正常一点
}

英語の入力効果がここで実現されるため、フォントは次を使用します。固定幅フォント: 等幅、長さの単位 ch (

1ch は、現在のフォント

の数字 0 の幅です) 固定幅フォントでは、他の文字の幅も次の値に等しくなります。 1chこのようにして、テキストコンテナの幅＝全文字数×1chを設定することができます。 アニメーション ステップを使用して、テキスト コンテナの幅を 0 から実際の幅まで徐々に増加させます。

stepsはアニメーションをいくつかのステップに分割して再生することができますが、今回のようにキャラクターが28人いるので、1キャラクターずつ表示するために連続したアニメーションを28ステップに分割して再生します。 点滅キャレット アニメーションは、右枠の透明度を変更して繰り返し再生することで、カーソルの点滅効果を実現します。

2. 中国語入力効果

中国語入力効果とその違い英語の場合、等幅フォントでは漢字 1 文字が 2ch に相当するため、テキストコンテナの幅 = 漢字数 * 2ch となります。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がCSS3 を使用して入力効果をシミュレートする (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。