はじめに
どうAtsu1209です♪(←音符復活)
いきなりですがh1テキストなどの色をグラデーションにしたのはいいけど
アニメーションをつけたいなと思ったことはありませんか?
なので今回はテキストをグラデーション&色変化のアニメーションにする
方法を書いて行きます。
CSS
まずグラデーションを作ります
例として h1テキストを使います。
まずHTMLを書きます
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>グラデーション</title>
</head>
<body>
<h1 class="glad">Hello World</h1>
</body>
</html>
今回はClassを使ってCSSを書きたいのでClassをつけておきます
次にCSS
index.css
.glad {
background: linear-gradient(90deg, #1e90ff, #00bfff, #87cefa);
background-size: 200% 100%;
animation: gradientAnimation 4s linear infinite;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes gradientAnimation {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
background: linear-gradient(90deg, #1e90ff, #00bfff, #87cefa);
の#1e90ffと#00bfffと#87cefaでグラーデーションに使う
3色を指定しています。
@keyframes gradientAnimationで色が変化するアニメーション
をつけていて、上のbackgroundで指定した色を変化させて行く
ようになっています
見本
以上
今回はグラデーションを動かす方法を書きました。
是非使ってみてはいかがでしょうか
なにか意見がありましたらコメントへ
では 次の記事で