CSS で TikTok テキスト揺れエフェクトを実装する例

日々の開発において、フロントエンドの学生はアニメーションやデザインについてよく議論します。デザイナーはコードで実装したいのですが、フロントエンドのデザイナーは GIF 画像をデザインしたいのです。結局、誰も譲歩できず、デザイナーは辞めてしまい、フロントエンドのデザイナーだけが残業することになります...

CSS テクノロジーは、フロントエンドで習得しなければならないスキルです。習得する必要があるだけでなく、熟達する必要もあります。フロントエンドフレームワークが普及している現在の傾向により、プログラマーがスタイルを記述する機会はますます少なくなっています。コンポーネントベースの開発では、ページに対して 1 行の CSS コードも記述する必要はほとんどありません。たとえ書かなくても、その背後にある原理を理解しなければなりません。

ウェブページのパフォーマンスの観点から、CSS で実装できるアニメーションは JS を絶対に使用すべきではなく、JS で実装できるアニメーションは GIF を絶対に使用すべきではありません。アニメーションを実行するとき、CSS はマシンの GPU を呼び出して実行できるため、当然、パフォーマンスは JS よりもはるかに優れています。上記のTikTokのテキストの揺れは、テキストの影の方向を変え、ループアニメーションフレームのぼかし効果を設定することで、CSSアニメーションを使用して実現できます。原理を知れば、ずっと簡単になります。日常生活の中でもっと頻繁にそれについて考えたほうがいいかもしれません。

効果図は以下のとおりです。

コードを添付する

体 {
  マージン: 0;
  パディング: 0;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  最小高さ: 100vh;
  背景: #000;
}
h2 {
  色: #fff;
  フォントファミリー: サンセリフ;
  フォントサイズ: 4em;
  アニメーション: 0.5 秒の線形無限アニメーション;
}

@keyframes アニメーション {
  0%、100% {
    テキストシャドウ: -1.5px -1.5px 0 #0ff, 1.5px 1.5px 0 #f00;
  }
  25% {
    テキストシャドウ: 1.5px 1.5px 0 #0ff, -1.5px -1.5px 0 #f00;
  }
  50% {
    テキストシャドウ: 1.5px -1.5px 0 #0ff、1.5px -1.5px 0 #f00;
  }
  75% {
    テキストシャドウ: -1.5px 1.5px 0 #0ff、-1.5px 1.5px 0 #f00;
  }
}

これで、CSS を使用して TikTok のテキスト シェイク エフェクトを実装する方法に関するこの記事は終了です。より関連性の高い CSS テキスト シェイク コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。