【CSS3】CSSだけで背景にグラデーションのアニメーションを入れる方法

こんにちは、Webデザイナーのsowです。

今回はCSSだけで背景にグラデーションを入れて、さらにゆらゆらとアニメーションさせる方法です。
きっとどこかで同じ様なTIPSを見た事があって、
「背景にグラデかけてもなぁ」と思ってる方もいると思います、が！
要は使い所です！
僕はボタンの背景に使ってみました。

DEMO

Gradation

この記事の目次

  1. CODE PEN
  2. HTML
  3. CSS

CODE PEN

元ネタは下記のCODE PENです。
やっていることは背景にグラデーションを掛けて、
キーフレームで動かしています。

See the Pen
Pure CSS Gradient Background Animation by Manuel Pinto (@P1N2O)
on CodePen.

HTML

記事の最初でお見せしたDEMOのHTMLは以下です。

<p class="gradation"><a href="">Gradation</a></p>

CSS

CSSはこちら。

@keyframes gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

.gradation a {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 5s ease infinite;
display: block;
border-radius: 50%;
line-height: 110px;
width: 110px;
text-align: center;
color: #fff;
}

非常に簡単ですが、目立つしカッコいい！

インスタグラムのロゴをはじめ、グラデーションはまだまだWebに限らずトレンドになっているので
ワンポイントで入れていくのはアリだと思います:)

© GOKAN DESIGN STUDIO