<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%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.