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

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

青灯夜游

リリース： 2022-07-20 20:41:09

転載

2550 人が閲覧しました

この記事では、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)。全体の効果は最初の図に示されているとおりです。