純粋な CSS を使用した動的テキスト効果の例

ウェブサイトで、ページを開くとテキストと画像の両方が時間とともに変化するエフェクトを皆さんも見たことがあると思います。今日は、純粋な CSS を使用してこのエフェクトを実現する方法を紹介します。一見。

クールなウェブサイトをよく見かけますよね

そのようなウェブサイトでは、ページを開くとすぐに、テキストと画像の両方が指定された時間とともに変化することがわかります。原理は非常にシンプルで、主に CSS のアニメーション属性を使用します。

次に、現在のプロジェクトを例として、テキストと画像のアニメーション効果を実現します。

HTML コードの記述:

コードをコピー

コードは次のとおりです:

<section class="rw-wrapper">
<span class="span-title">文字题目</span>
<h2 class="rw-sentence">
</h2>
</section>

セクション タグ、スパン (好みに応じて追加) を含む、現在の一般的なフレームワークが記述されました。 、h2タグ。次にテキストコードを追加します。 h2にコードを入れます。

コードをコピーします

コードは次のとおりです:

<p class="rw-words rw-words-1">
<span>内容1</span>
<span>内容2</span>
...
</p>

最初のテキストアニメーションHTML。

コードをコピーします

コードは次のとおりです:

<p class="rw-words rw-words-2">
<span>内容1</span>
...
</p>

2番目のテキストアニメーションHTML。

コードをコピーします

コードは次のとおりです:

//同理
<p class="rw-words rw-words-3">
<span><img src="图片路径" width="XX" height="XX"></span>
...
</p>

画像の変形効果は上のGIFに示されているとおりです。写真は右からスライドして切り替わります。

OK、HTML コードが完成したので、次はコア部分である CSS アニメーションとフォント スタイルを実装しましょう。

CSSコードの書き方

コードをコピー

コードは次のとおりです:

.rw-words{
-webkit-perspective:800px;
-moz-perspective:800px;
-o-perspective:800px;
-ms-perspactive:800px;
perspactive:800px;
}

ちなみに、perspective属性は、ビューから3D要素までの距離をピクセル単位で定義します。要素のパースペクティブ属性を定義すると、要素自体ではなく、その子要素にパースペクティブ効果が適用されます。 800px という数字は、ビューからの要素の距離を表します。 -moz は Firefox ブラウザのプライベート プロパティを表し、-ms は IE ブラウザのプライベート プロパティを表し、-webkit は chrome および safari のプライベート プロパティを表し、-o は Opera ブラウザのプライベート プロパティを表します。

コードをコピーします

コードは次のとおりです。

.rw-words span{
white-space:nowrap; //文字不允许换行
overflow:hidden;
}

実際の状況に応じて、特定の タグの位置を設定します。

コードをコピーします

コードは次のとおりです:

.rw-words-1 span{
-webkit-animation: rotateWordsFirst 10s linear infinite 0s;
-o-animation: rotateWordsFirst 10s linear infinite 0s;
-moz-animation: rotateWordsFirst 10s linear infinite 0s;
-ms-animation: rotateWordsFirst 10s linear infinite 0s;
animation:rotateWordsFirst 10s linear infinite 0s;
}

ここでアニメーション効果を使用してください!まず、rotateWordsFirst はアニメーションの名前、10 秒はアニメーション全体が 1 回完了するのにかかる時間、linear は使用されるタイム カーブ、infinite は無制限に繰り返されます。

アニメーション構文について:

コードをコピーします

コードは次のとおりです:

animation: name duration timing-function delay iteration-count direction;

animation-name: セレクターにバインドする必要があるキーフレーム名を指定します。

animation-duration: アニメーションが完了するまでにかかる時間を秒またはミリ秒で指定します。

animation-timing-function: アニメーションのスピードカーブを指定します。

animation-delay: アニメーションが開始するまでの遅延を指定します。

animation-iteration-count: アニメーションを再生する回数を指定します (無限カルーセル)

animation-direction: アニメーションを順番に逆方向に再生するかどうかを指定します。

さらに詳しく知りたい場合は、CSS シリーズ アニメーションi を検索してください。

次に、別のタイプのアニメーションです。

コードをコピー

コードは次のとおりです:

.rw-words-2 span{
-webkit-animation: rotateWordsFirst 10s ease-in infinite 0s;
-o-animation: rotateWordsFirst 10s ease-in infinite 0s;
-moz-animation: rotateWordsFirst 10s ease-in infinite 0s;
-ms-animation: rotateWordsFirst 10s ease-in infinite 0s;
animation:rotateWordsFirst 10s ease-in infinite 0s;
}

ease-in の説明:

ease は、低速で開始し、その後高速になり、その後低速で終了するトランジション効果を指定します。 easy-in は低速で​​開始するトランジション エフェクトを指定します。ease-out は低速で​​開始および終了するトランジション エフェクトを指定します。効果)

同様に、.rw-words -3 のスパンも同じ方法で設定できます。

コードをコピー

コードは次のとおりです:

.rw-words span：nth-child(1){
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}

:nth-child(n) セレクターは、要素の型に関係なく、親要素に属する N 番目の子要素と一致します。 n には、数値、キーワード、または式を指定できます。

コードをコピーします

コードは次のとおりです:

.rw-words span:nth-child(n) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
...

テキスト間の表示遅延を実現するために異なるセレクターを設定します。

コードをコピーします

コードは次のとおりです:

@-webkit-keyframes rotateWordsFirst/second {
0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 0px;}
//此属性查看animation
5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}
17% { opacity: 1; } //设置不透明级别
20% { opacity: 0; }
100% { opacity: 0; }
}

キーフレームは各アニメーションのタイムラインを定義し、アニメーションが特定の時間に動作する要素の状態を設定できます。アニメーションで使用されます。

次に、-o、-moz、-ms などの各ブラウザーの適応を記述します。

アニメーション属性に加えて、テキストや画像の回転や拡大縮小などの効果を実現できるtransform属性の使用も試すことができます。上記はすべて、純粋なCSSを使用して動的なテキスト効果を実現することを目的としています。誰もが CSS ヘルプの使い方を学ぶのに役立ちます。

関連おすすめ:

CSSテキストフォントの色設定方法(CSSカラー)

以上が純粋な CSS を使用した動的テキスト効果の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。