<div class="gradient-bg">
  漸變背景動畫
</div>
body {
  background: #282c34; // 灰黑色
  font-family: Arial, sans-serif;
}

.gradient-bg {
  width: 90vw;
  height: 90vh;
  margin: 2rem auto;
  background: linear-gradient(
    120deg,
    #a8e6cf,
    /* 粉綠 */ #ffd3b6,
    /* 粉黃 */ #ffaaa5 /* 粉紅 */
  );
  background-size: 300% 300%;
  animation: gradientAnimation 5s ease infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 定義漸變動畫 */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.