[CSSチュートリアル】CSSで実現するTikTokのテキストジッター効果例

毎日の開発でフロントエンドの学生は、いくつかの動的な効果や戦いのデザインのために素晴らしいだろう、デザインは、GIFを設計するフロントエンドを達成するためにコードを使用したい、そして最後に誰も、デザインは残業だけで動作するようにフロントエンドを残して、左に聞かせてくれないだろう......

CSSの技術は、フロントエンドは、マスターするだけでなく、熟練するために、スキルを習得する必要があります。今すぐフロントエンドフレームワークの傾向が横行し、プログラマが少なく、より少ない機会スタイル、コンポーネントベースの開発、ページほとんどないCSSコードの行を記述する必要があるしています。あなたが書いていない場合でも、その背後にある原理は理解する必要があります。

Webのパフォーマンスという観点では、cssで実現できるアニメーションはjsを使うことはありませんし、jsで実現できるアニメーションはgifを使うことはありませんし、cssはアニメーション実行時にマシンのGPUを呼び出して実行できるので、パフォーマンスは当然jsよりずっと有利です。上記のTikTokのテキストのジッターは、cssアニメーションで実現することができ、テキストの影の方向を変えることで、サイクルのアニメーションフレームをぼかす効果を設定することができます。原理は、はるかに簡単になります知っている。通常、もっと把握しようとすることがあります。

その効果は次の通りです。

コードを添付する

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000;
}
h2 {
  color: #fff;
  font-family: sans-serif;
  font-size: 4em;
  animation: animate 0.5s linear infinite;
}

@keyframes animate {
  0%, 100% {
    text-shadow: -1.5px -1.5px 0 #0ff, 1.5px 1.5px 0 #f00;
  }
  25% {
    text-shadow: 1.5px 1.5px 0 #0ff, -1.5px -1.5px 0 #f00;
  }
  50% {
    text-shadow: 1.5px -1.5px 0 #0ff, 1.5px -1.5px 0 #f00;
  }
  75% {
    text-shadow: -1.5px 1.5px 0 #0ff, -1.5px 1.5px 0 #f00;
  }
}

CSSでTikTokテキストジッター効果の例を達成するために、この記事を紹介し、より関連するCSSテキストジッターコンテンツは、スクリプトの家の前の記事を検索したり、次の関連記事を閲覧を続けてください、私はあなたがより多くのスクリプトハウスをサポートしています願っています！...