背景の色を変化させる（HTML、CSS、JS）

まえがき

背景の色を変化させる方法を記載しています。

単色を変化させる

keyframes で、background-color を変化させています。

<!-- html -->
<div class="demo-item10"></div>

/* css */
.demo-item10{
  animation-name: demo_ky11;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function:linear;
}
@keyframes demo_ky11{
  0%{ background-color: #f5b199 }
  33%{ background-color: #98f5b1; }
  67%{ background-color: #b198f5; }
 100%{ background-color: #f5b199; }
}

linear-gradient を変化させる

gsap（GreenSock社が開発しているJavaScriptライブラリ）で、linear-gradient を変化させています。

<!-- html -->
<div class="demo-item20"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>

//js
const item20 = document.querySelector(".demo-item20");
const tl20 = gsap.timeline({
  defaults: {ease: "power0", duration: 2},
  repeat: -1,
});
gsap.set(item20, {backgroundImage: 'linear-gradient(45deg, #f5b199, #98f5b1)'})
tl20.to(item20, {backgroundImage: 'linear-gradient(45deg, #f5b199, #f5b199)'})
    .to(item20, {backgroundImage: 'linear-gradient(45deg, #b198f5, #f5b199)'})
    .to(item20, {backgroundImage: 'linear-gradient(45deg, #b198f5, #b198f5)'})
    .to(item20, {backgroundImage: 'linear-gradient(45deg, #98f5b1, #b198f5)'})
    .to(item20, {backgroundImage: 'linear-gradient(45deg, #98f5b1, #98f5b1)'})
    .to(item20, {backgroundImage: 'linear-gradient(45deg, #f5b199, #98f5b1)'});

radial-gradient を変化させる

先程と同じ方法で、radial-gradient を変化させています。

<!-- html -->
<div class="demo-item30"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>

//js
const item30 = document.querySelector(".demo-item30");
const tl30 = gsap.timeline({
  defaults: {ease: "power0", duration: 2},
  repeat: -1,
});
gsap.set(item30, {backgroundImage: 'radial-gradient(#f5b199, #98f5b1)'})
tl30.to(item30, {backgroundImage: 'radial-gradient(#f5b199, #f5b199)'})
    .to(item30, {backgroundImage: 'radial-gradient(#b198f5, #f5b199)'})
    .to(item30, {backgroundImage: 'radial-gradient(#b198f5, #b198f5)'})
    .to(item30, {backgroundImage: 'radial-gradient(#98f5b1, #b198f5)'})
    .to(item30, {backgroundImage: 'radial-gradient(#98f5b1, #98f5b1)'})
    .to(item30, {backgroundImage: 'radial-gradient(#f5b199, #98f5b1)'});

conic-gradient を変化させる

先程と同じ方法で、conic-gradient を変化させています。

<!-- html -->
<div class="demo-item40"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>

//js
const item40 = document.querySelector(".demo-item40");
const tl40 = gsap.timeline({
  defaults: {ease: "power0", duration: 2},
  repeat: -1,
});
gsap.set(item40, {backgroundImage: 'conic-gradient(#f5b199, #98f5b1)'})
tl40.to(item40, {backgroundImage: 'conic-gradient(#f5b199, #f5b199)'})
    .to(item40, {backgroundImage: 'conic-gradient(#b198f5, #f5b199)'})
    .to(item40, {backgroundImage: 'conic-gradient(#b198f5, #b198f5)'})
    .to(item40, {backgroundImage: 'conic-gradient(#98f5b1, #b198f5)'})
    .to(item40, {backgroundImage: 'conic-gradient(#98f5b1, #98f5b1)'})
    .to(item40, {backgroundImage: 'conic-gradient(#f5b199, #98f5b1)'});

あとがき

background-imageを使えば、色んな形や模様が作れるので、アニメーションさせることで、より面白い表現が出来るようになるかもしれません。
以上です。最後までお読み下さりありがとうございました。

また弊社では、一緒にWEB業界を盛り上げてくれるメンバーを募集中です！
デザインやWEB制作に興味がある方は、ぜひエントリーページからご応募ください。