CSS動(dòng)畫背景樣式可以讓網(wǎng)頁(yè)更加生動(dòng)有趣，給用戶帶來更好的視覺體驗(yàn)。下面我們來一起學(xué)習(xí)一些CSS好看動(dòng)畫背景樣式。

/* 水平動(dòng)態(tài)波浪 */
@keyframes wave {
0% {
background-position-x: 0;
}
100% {
background-position-x: 100%;
}
}
.bg-wave {
background: linear-gradient(90deg, #70e1f5, #ffd194);
background-size: 150% 100%;
animation: wave 20s ease-in-out infinite;
}
/* 垂直動(dòng)態(tài)波浪 */
@keyframes wave {
0% {
background-position-y: 0;
}
100% {
background-position-y: 100%;
}
}
.bg-wave {
background: linear-gradient(90deg, #70e1f5, #ffd194);
background-size: 100% 150%;
animation: wave 20s ease-in-out infinite;
}
/* 點(diǎn)陣背景 */
.bg-dots {
background-color: #ffffff;
background-image: radial-gradient(circle, #284b63 1px, transparent 1px), radial-gradient(circle, #284b63 1px, transparent 1px);
background-position: 0 0, 25px 25px;
background-size: 50px 50px;
background-repeat: repeat;
}
/* 彩虹漸變背景 */
.bg-rainbow {
background: linear-gradient(-45deg, #f093fb, #f5576c, #fdca40);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

通過這些樣式的使用，可以讓網(wǎng)頁(yè)更有生命力，讓用戶更加愿意停留在網(wǎng)站上。其中，水平和垂直動(dòng)態(tài)波浪的樣式不同，可以根據(jù)自己的需求選擇使用。點(diǎn)陣背景的樣式簡(jiǎn)單而美觀，而彩虹漸變背景則更加的奪目，適合用于特殊場(chǎng)合的網(wǎng)站。如果大家有更多好看動(dòng)畫背景樣式的想法，歡迎在評(píng)論區(qū)留言哦！