季節ごとに背景を変化

設計

• 今日の日付を表示
• 季節により背景色が変化
• 季節名のアニメーション、文字色が変化

JavaScript

<script>
  const d = new Date();
  const year = d.getFullYear();
  const month = d.getMonth() + 1;
  const day = d.getDate();
  const week = d.getDay();
  const weekJP = ["日", "月", "火", "水", "木", "金", "土"][week];
  const sect = document.getElementById("Sect");

  let greeting;
  let colorName;

  if (month >= 4 && month <= 6) {
    greeting = "春";
    colorName = "spring";
    colorCode = "#e78d8d";
  } else if (month >= 7 && month <= 9) {
    greeting = "夏";
    colorName = "summer";
    colorCode = "#279d49";
  } else if (month >= 10 && month <= 12) {
    greeting = "秋";
    colorName = "autumn";
    colorCode = "#e8c336";
  } else {
    greeting = "冬"; // 1月〜3月
    colorName = "winter";
    colorCode = "#66c4ce";
  }
  sect.style.backgroundColor = colorCode;
  document.currentScript.insertAdjacentHTML("beforebegin", `<p><span class="season ${colorName}">${greeting}</span>今日は${year}年${month}月${day}日<span class="week">（${weekJP}）</span>です</p>`);
</script>

CSS

.seasons {
  font-size: 2em;
  color: #fff;
  display: grid;
  place-content: center;
  width: 100%;
  height: 50dvh;
  letter-spacing: 0.2rem;
}
p {
  display: flex;
  align-items: center;
  & .season {
    display: inline-grid;
    place-content: center;
    font-size: 3em;
    margin-right: 0.3em;
    background-color: #fff;
    line-height: 1;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
  }
  & .week {
    font-size: 1.5rem;
    margin: 0 -0.5em -0.2em;
  }
}
.spring {
  color: #e78d8d;
}
@keyframes fuwafuwa {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.season.spring {
  animation: fuwafuwa 3s infinite ease-in-out;
}
.summer {
  color: #279d49;
}
@keyframes kira {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.2);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
.season.summer {
  animation: kira 2s infinite ease-in-out;
}
.autumn {
  color: #e8c336;
}
@keyframes yura {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}
.season.autumn {
  animation: yura 4s infinite ease-in-out;
}
.winter {
  color: #66c4ce;
}
@keyframes furu {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  50% {
    transform: translateX(2px);
  }
  75% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}
.season.winter {
  animation: furu 0.5s infinite;
}