CSS3 フィルターを賢く使って、テキストのフラッシュ切り替えアニメーション効果を作成しましょう。

この記事では、CSS3 フィルターを使用してハイエンドのテキスト フラッシュ切り替えアニメーション効果を実現する方法を説明します。皆様のお役に立てれば幸いです。

今日、とても興味深い テキスト フラッシュ アニメーション を偶然見ました:

# #このタイプの場合テキストフラッシュ切り替え効果を適切に使用すると、ユーザーの注意をより引き付けることができます。 [推奨学習: css ビデオ チュートリアル ]

もちろん、今日は CSS を使用して上記の効果を実現しようとしているわけではありません。試しているうちに、CSS を使用して blur() フィルターと contrast() を使用して、テキスト フラッシュ アニメーション を非常に簡単に実現できる別のタイプを見つけました。フィルターによって生成される融合効果は次のようになります。

このテクニックは多くの記事でも言及されており、この記事では簡単に説明します。

ぼかしフィルターとコントラスト フィルターを混合するとフュージョン エフェクトが生成されます

この記事の焦点は、ぼかしフィルターとコントラスト フィルターを追加することによって生成されるフュージョン エフェクト。 2 つのフィルターを別々に取り出し、その機能は次のとおりです:

• filter: Blur(): 画像にガウスぼかし効果を設定します。

• filter:contrast(): 画像のコントラストを調整します。

しかし、それらが「融合」したとき、驚くべき融合現象が起こりました。

最初に簡単な例を見てみましょう:

CodePen デモ -- ぼかしとコントラストの組み合わせをフィルターする

https://codepen.io/Chokcoco/pen/QqWBqV

2 つの円が交差する過程をよく見てください。エッジが接触すると、境界融合効果が生じます。コントラスト フィルターを使用して、ガウスぼかしのぼやけたエッジを削除し、ガウスぼかしを使用してフュージョン効果を実現します。

上記の効果の実装は 2 つの点に基づいています:

• グラフィックスは、filter:contrast()## に設定されたキャンバスの背景上でアニメーション化されます。

• #アニメーション グラフィックが設定されています

  filter:blur()( アニメーション グラフィックの親要素を設定する必要があります filter:contrast( ) Canvas)

もちろん、背景色は必ずしも白である必要はありません。上記のデモを少し変更します。簡単な図は次のとおりです。

ぼかし/コントラスト フィルターを使用してテキストを切り替える

上記の手法を使用すると、次のようなテキストの融合効果を実現できます:

CodePen デモ -- 単語アニメーション | 単語フィルター

https://codepen.io/Chokcoco/pen/jLjNRj

これこの手法を使用すると、アニメーションを賢く考えることができます。

複数のテキストが順番に表示されます (制御処理には

animation-delay

を使用します)

• 前のテキストが消えたら、次のテキストが表示されることを確認してください

• 上記のフィルターを重ね合わせます

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

  <div class="g-container">
    <div class="word">iPhone</div>
    <div class="word">13</div>
    <div class="word">Pro</div>
    <div class="word">强得很！</div>
  </div>

  @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
  
  $speed: 8s;
  $wordCount: 4;
  
  .g-container {
      position: relative;
      width: 100vw;
      height: 100vh;
      background: #000;
      font-family: 'Montserrat', sans-serif;
      color: #fff;
      font-size: 120px;
      filter: contrast(15);
  }
  .word {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: change $speed infinite ease-in-out;
  
      @for $i from 0 to $wordCount {
          &:nth-child(#{$i + 1}) {
              animation-delay: ($speed / ($wordCount + 1) * $i) - $speed;
          }
      }
  }
  
  @keyframes change {
      0%,
      5%,
      100% {
          filter: blur(0px);
          opacity: 1;
      }
      50%,
      80% {
          filter: blur(80px);
          opacity: 0;
      }
  }

コード全体は

@keyframes change

アニメーションに焦点を当てる必要があります。このアニメーションをテキストに順番に追加します (つまり、

animation - を使用します)。遅延

はシーケンスに遅延を追加します)。これにより、前のテキストが消える過程で次のテキストが表示される効果が得られます。 上記の .g-container は、そのようなコードを追加します --

filter:contrast(15)

この文を削除すると、効果は次のようになります:

このキー コードを追加します -

filter:contrast(15)。全体の効果は最初の図に示されているとおりです。

CodePen デモ -- テキスト フュージョン フラッシュ切り替え効果を実現する純粋な CSS

#https://codepen.io/Chokcoco/pen/xxLjdmz

アニメーション全体の 2 つの重要なポイント:

blur

フィルター ブレンディング
• contrast

  フィルターを使用してフュージョン効果を生成します

• ##前のテキストが消える過程で、次のテキストが表示され、現在表示されているテキストが前のテキストから進化したような効果が生まれます

#したがって、HTML を通じてテキストの数を制御し、アニメーションの継続時間を表す

$speed

と SASS 変数内のテキストの数の $wordCount を変更し、最後に @keyframes change のパラメータは、必要な効果を最適化するために常に調整されます。様々なテキストフラッシュエフェクトが進化しました。

最後に

# さて、この記事はここで終わります。この記事がお役に立てば幸いです:)

元のアドレス: https : //segmentfault.com/a/1190000040965698

著者: chokcoco

(学習ビデオ共有:

Web フロントエンドを始める

)

以上がCSS3 フィルターを賢く使って、テキストのフラッシュ切り替えアニメーション効果を作成しましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。