CSSでテキストグラデーションを実際にアニメーション化する方法

を介してKristopherローラーでカバー写真.
あなたはすべて私の好きだったので、私はそれが2番目のスイングの価値があると考えた.おかげで私はアニメーション化によってグラデーションの背景をアニメーション化することが可能であることを知らせるためにbackground-position .
だから、最悪の技術的なCSSを可能にするユーモラスな記事を書く代わりに、このことはひどいことにしよう.私は誓う、この時間を使用した唯一のJavaScriptは、ボタンのためだった.
私は問題がありません、私が欲しいときはいつでも、私は止まることができます.
最後に虹のテキストを取得する方法を考え出したので、良い部分にジャンプしましょう.

背景位置のアニメーション

これでトランジションを使うには、前のポスト(Yikes)と同様の戦術に頼らなければならないだろう.しかし、すべての努力を通過する代わりに、私は使用することを決めた@keyframes , あなたがコミットする前にファイルを追加するのを忘れるほど簡単であることがわかりました.

@keyframes whoosh {
  0% { background-position-x: 0 }
  100% { background-position-x: 100% }
}

.animated-thing {
  animation-name: whoosh; // references @keyframes name
  animation-duration: 2000ms; // or whatever
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

しかし、この外観を良くするために言及される重要な注意が、あります.
ACatveat ?え?
cat画像は200 pxワイドで、ウィンドウは400 pxワイドか500 pxワイドです.をクリックします.コンテナが400 pxワイドであるとき、アニメーションは滑らかです、そして、あなたがそれが突然それがループするとき、最初に突然リセットするのに気づかないでください.500 px幅のとき、アニメーションの終わりは100 pxオフセットで、ジャンプは非常に目立つ.
イラスト用GIFの使用

ループがリセットされると、それが開始されたときと同じ位置にあり、ループを作ることはずっと目立たない.(まだジャンプがあるかもしれませんが、とても小さくすべきです).

このふわふわの雲の友人のかわいらしさにもかかわらず、ジャンプは、カメラが最後の瞬間に下方に急激に回転するために非常に顕著です.パット猫は、スムーズにアニメーション化されません.
もう一つの問題は、背景がこのコンテナのコンテナと同じ幅であるように設定することが、アニメーション化しないようにすることです.私は、CSSがどこにも行かないと思うと思います!したがって、それはいくつかの正確な分数または正確な倍数である必要があります.そして、それが始まった正確な同じ位置にリセットする必要があります.

グラデーションでアニメーションの背景位置

CSSを実際にアニメーション化するにはbackground-size 幅200 %(100 %高さ)に.それはやさしい部分でした.
滑らかにアニメーション化するグラデーションを得るためにトリッキーだった.

  $first-color: #996699;
  $second-color:  #B39500;
  $third-color:  #009980;
  $fourth-color: #006699;
  $angle: 75deg;

  background-image: linear-gradient(
    $angle,
    // so you can see the repetition of colors easily
    $first-color,
    $second-color,
    $third-color,
    $fourth-color,
    // repeat a second time
    $first-color,
    $second-color,
    $third-color,
    $fourth-color,
    // back to the first color
    $first-color
  );
}

これは、ループがリセットされたときに“ジャンプ”に見えないようにグラデーションが設定される方法です.それは2回繰り返してもループの最初のビットを繰り返す必要があります.最後のペンでは、これはmixinになった.

@mixin flag-gradient($direction: null, $color-stops...) {
  $grads: $color-stops;
  @each $stop in $color-stops {
    $grads: append($grads, $stop);
  }
  $grads: append($grads, nth(nth($grads, 1), 1));

  // [ clipped ]

  background-image: linear-gradient($direction, $grads);
}

これはあなたのためのすべての繰り返し作業を行います.それはコピーされたArgリストをコピーします、そして、それから新しい色の停止(HMUがその部分をするためにより良い方法を知っているならば、HMU)を追記するために、それをループしてください、そして、終わりまで最初のカラーストップとタックの色部分を選んでください.あなただけの実際のフラグの色を指定する必要があります.
また、あなたが傾斜を置く角度の注意を取る-それは、より顕著にジャンプされる急増します.75と90の間のどこかはほとんど見えないが、まだ美的に喜ばせるのに十分なように見えます.より小さい幅は、この角度をシャープにする必要があります.90は安全です!
dev . toにインラインペンを表示しているなら、このビットのために90度の変種が表示されます.

@mixin flag-gradient($direction: null, $color-stops...) {
  // [ clipped ]

  @if $direction == null {
    $direction: 75deg;
    @media only screen and  (max-width : 800px) {
      $direction: 80deg;
    }
    @media only screen and  (max-width : 500px) {
      $direction: 90deg;
    }
  }

  // [ clipped ]
}

アニメーションの品質は、角度と幅に基づいて非常に急激に変化するので、オーバーライドを送信しない場合は自動調整します.

フラグの追加🏳️‍🌈 (リファクタリング)

最初の虹のアニメーションを行った後、それは見えた.あまりにも簡単.私は、CSSに対する永遠の闘争でより一生懸命に働く必要がありました.私は、これが一般化されることができたと思いました?もっと誇りを見せてもらえますか.

ビープライドフラグで、私は別の興味深い警告を発見した.ジャンプをより顕著にするためには、グラデーションはできるだけ滑らかにすべきである.パーセントベースの色の停止を使用して一般的に不十分になりますちょうど色の複製をより良い結果を持っていることが判明.

うーん、私は本当に白い背景があまりにも背景にブレンドしないようにそこにテキストの影を見てみたい.白はいくつかの異なるフラグで表示されますので、それは間違いなく一般的な問題です.

それでうまくいった.
あなたがそれについて考えるなら、これは実際には全く論理的です.グラデーションテキストトリックが最初に働く全体の理由は、テキスト自体を透明にし、背景をクリッピングすることです実際にテキストに背景を適用することではありません.
私は、これを修理するのを見ました.StackOverflow 示唆

Basically, the idea is to have 2 div overplayed on each other. The lower one provides the background and the shadow. And the the div above just uses a mask to cut out the exact same text from the background image, so that it covers the text of lower element, but not the shadow:

2つのdiv互いでオーバープレイ

2つのdiv互いでオーバープレイ

2つのdiv互いでオーバープレイ

再びその道を下りていない!あなたは私を作ることができない!

十分に近い.
様々なフラグのデザインと色で遊んで少し後、私は4つの異なる“テーマ”を必要とする、光/ダークと暖かい/クールに基づいて定住.これがすべてである.

$background-map: (
    light-cool: #ecf0f1,
    light-warm: #f2eded,
    dark-cool: #10181e,
    dark-warm: #0e070a,
);

@function get-opposite-tone($tone) {
  @if $tone == 'light' {
    @return 'dark';
  }
  @return 'light';
}

@mixin set-background($tone: 'light', $temp: 'cool') {
  $primary: null;
  $secondary: null;

  background-color: map-get($background-map, #{$tone}-#{$temp});
  & > #picker > button {
    background-color: map-get($background-map,
      #{get-opposite-tone($tone)}-#{$temp}
    );
    &.highlight {
      @if $tone == 'light' {
        background-color: lighten(map-get($background-map,
        #{get-opposite-tone($tone)}-#{$temp}
      ), 12);
      } @else {
        background-color: darken(map-get($background-map,
          #{get-opposite-tone($tone)}-#{$temp}
        ), 24);
      }
    }
    color: map-get($background-map, #{$tone}-#{$temp});
  }

  // [ clipped ]
}

この時点で、私が必要としていたのは、ボタンをフックするためのJavaScriptの8行(. jquery)です.

楽しい事実を包む

側のボタンCSS Grid レイアウトと非常に簡単で便利だった

あなたは1つの標準的な“レズビアン”誇りフラグがない知っていましたか?私は色の定義を見つけるのが簡単で、最も人気があるようだったので、私は口紅レスビアン旗を選びました

SCSSarglists 物である

あなたは置くことができない@media 内部のクエリ文@function ( lmao私が試してみたが、コンパイラは例外をスローする)