CSSのみで色をかえる

スライドショーみたいな切り替えではなく、だんだんと色が変わっていく背景を目指す。

コード

<head>
    <title>backgroundslide</title>
    <link rel="stylesheet" type="text/css" href="backslide.css">
</head>
<body>
</body>

body{
    height: 100vh;
    width: auto;
    background: linear-gradient(-45deg, 
    #873742, #648323, #238747, #108483);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    background-position: top center;
    background-attachment: fixed;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

斜めのスライドになっているが
background: linear-gradient(-45deg, #873742, #648323, #238747, #108483);
の部分の角度と色を変えれば流れる方向と色の組み合わせも変えることができる。
ただこれは意外と無駄なところもあるから改善の余地ありだね。

ちょっとしたコメント

最近WEBでのフロントデザイナーとか多くなったけど、その分、初心者が作るものも増えてきているなぁと。でも見てみると動的なものを作るのはjavascriptとかがやっぱり多いけど、単純なCSSでも作れるのも知っておくといいなと思った！

CSSってたのしい！（動的背景）

CSSのみで色をかえる

コード

ちょっとしたコメント