CSSの多色テキスト

この記事では、我々は非常にクールな効果を我々はCSSで多色のテキストを持つことができます作成されます.
私はしばらく前にTwitterで行われたこの効果を見て、これはCSSでどのように達成できるかによって吹き飛ばされました.
以下は我々が今日作成されるもののデモです!

CSSマルチカラーグラデーションテキスト
この効果を作成するには、まずHTML構造から始めましょう.我々は1つだけの要素が必要なので、これは超簡単です!

<h1>multi colored text in css</h1>

それからそれは魔法の魔法に私たちのCSSファイルにオフです🪄.
私たちの5色と我々の出発角度を定義することから始めましょう.

:root {
  --color-1: #442288;
  --color-2: #6ca2ea;
  --color-3: #b5d33d;
  --color-4: #fed23f;
  --color-5: #eb7d5b;
  --angle: 0deg;
}

基本的なCSSで、これが有効な構文であるので、ルートを使用して変数を定義します.ここにscssの必要はありません.
それから、我々の体に若干のスタイルを加えましょう.これは我々のテキストを中心に使用され、背景を黒にします.効果は黒でより良い作品も異なる色で動作します.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}

それからスタイリングを始めましょうh1 要素.
私は、何が起こっているかについてのより多くの考えを与えるために、いくつかのステップにこれらを壊しています.

基本的な見出しスタイリング
我々の基本的なスタイルのために、我々は比較的大きい見出しを望みます.

h1 {
  color: #fff;
  text-align: center;
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 6.5vw;
  font-weight: 900;
  line-height: 6vw;
  text-transform: uppercase;
}

これにより次の出力が得られます.


2 .各行のそれぞれの単語
上で見ることができるように、それはちょうど1つの大きな線です.独自の行で各単語を取得するには、次のCSS Hackを使用できます.

word-spacing: 100vw;

単一の行に各単語のスペースを作る


CSSテキストグラデーションの背景
今、我々はグラデーション効果を追加するに移動することができます.我々は5つのステップにグラデーションを分割することによって開始します.

background: linear-gradient(
  var(--angle),
  var(--color-1) 19%,
  transparent 19%,
  transparent 20%,
  var(--color-2) 20%,
  var(--color-2) 39%,
  transparent 39%,
  transparent 40%,
  var(--color-3) 40%,
  var(--color-3) 59%,
  transparent 59%,
  transparent 60%,
  var(--color-4) 60%,
  var(--color-4) 79%,
  transparent 79%,
  transparent 80%,
  var(--color-5) 80%
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;

ここでは、我々は我々が我々に持っている色を定めるのを見ることができます:root 要素定義.基本的な角度は0です.
我々は、後に我々のアニメーションのために各々の色の間で透明な境界線を加えます.
だけでなく、テキストにクリッピングモードを設定します.


CSSの線形背景グラデーションのアニメーション
勾配をアニメーション化するにはかなりトリッキーです.
我々が適用している主なハックは--angle 変数.
それから、我々は進んで、我々にアニメーションを加えることができますh1 要素.

animation: 10s rotate linear infinite;

この動画は次のようになります.

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

しかし、ブラウザは知らないので、これはあまり行われません360deg 値です.
を定義することでこれを修正することができます@property のために--angle 変数.

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

Note: This idea was taken from this cool CSS-Tricks article

そこに行く!超クールなCSSのテキストアニメーション効果.この記事をお楽しみください.

読んでいただきありがとうございます、接続しましょう!
私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or