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>

</head>

<body>

<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%}

}

以上です。ありがとうございました。

2017.11