CSSのみで色をかえる
スライドショーみたいな切り替えではなく、だんだんと色が変わっていく背景を目指す。
コード
<head><title>backgroundslide</title><linkrel="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:gradient15seaseinfinite;background-position:topcenter;background-attachment:fixed;}@keyframesgradient{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でも作れるのも知っておくといいなと思った！