webサイトのサイトデザインでもよく使うようになったグラデーション。
例えばボタンに使った時にhoverしたとき、背景に使用したときなどにグラデーションの色をアニメーションさせながら変化させることができます。
hoverしたときにグラデーションが動く
hoverしたときにグラデーションが左の方に流れていくようなイメージです。それでは実際のHTML・CSS、動作を見てみましょう
See the Pen
グラデーションボタン by kkdd (@kk8kk)
on CodePen.
cssを解説していくと
こんな感じでグラデーションを2倍にして、hoverしたときのpositionをずらして表示します。これでグラデーションが流れるようなアニメーションが再現できました！
今回は同色でやりましたが、全く違う色合いにしても面白いと思います。
scaleなど細かい部分はお好みで調整してください。
時間経過でグラデーションが動く
時間経過で背景のグラデーションが動きます。
See the Pen
グラデーションアニメーション by kkdd (@kk8kk)
on CodePen.
これも先ほどのグラデーションボタンの応用です。
背景でサイズを大きめにしておいて、あとはCSS Animationで背景の位置を変更していきます。
これも好きな色で試してみてください。
ただ、最初と最後の色は同じにしておいた方がおそらくきれいになります！
