文字の背景を動きあるグラデーションにしてみましょう。
HTMLとCSSだけで実装出来ます！
完成例↓ 藤柳サイトへようこそ！！の背景部分。
http://rsfgame.webcrow.jp/index.html
こちらのサイトがとても参考になります↓
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
https://www.webcreatorbox.com/tech/css-gradient
中でも、今回は”CSS Gradient Animator”を使って、徐々に変化するグラデーションを実装します。
CSS Gradient Animator
https://www.gradient-animator.com/
add colorで色を選択したり、SpeedやGradient Angle、Scroll Angleなどを変えてみて下さい。良い感じのが出来たら、いざ実装です。
右側に表示されている部分をコピーして、CSSに貼り付けてください。
＜右側に表示されている部分↓ コピーします＞
background: linear-gradient(270deg, #ff9e46, #5bff46);
background-size: 400% 400%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
少し、整えましょう。
まずは、HTMLはこんな感じ
＜HTML＞
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pc.css" type="text/css">
</head>
<body>
<div align="center">
<div class="top_message">
<p>藤柳サイトへようこそ！！<br><br>
今までの旅行記や音楽・WEB制作をまとめています。
<br>また、学生向けの学習ゲームを製作しています。</p>
</div>
</div>
</body>
</html>
続いてCSSはこんな感じ
＜CSS＞
div.top_message{
width:80%;
max-width: 800px;
padding:10px;
margin:10px;
border-radius:10px;
/* ここから下がさっきコピーした部分 */
background: linear-gradient(267deg, #8eff3c, #3afec8);
background-size: 400% 400%;
-webkit-animation: AnimationName 9s ease infinite;
-moz-animation: AnimationName 9s ease infinite;
-o-animation: AnimationName 9s ease infinite;
animation: AnimationName 9s ease infinite;}
/* セミコロンの後に、｝とじかっこを付けましょう↑ */
@-webkit-keyframes AnimationName {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
@keyframes AnimationName {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
以上です。ありがとうございました。
0コメント