CSS動(dòng)畫特效可以增加網(wǎng)頁的視覺效果和用戶的體驗(yàn)。下面是一些簡單的CSS動(dòng)畫特效的實(shí)現(xiàn)方法。

/* 1. 漸變動(dòng)畫 */
.box {
background: linear-gradient(to right, #ff2a68, #ff8900);
animation: gradient 2s infinite;
}
@keyframes gradient {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
/* 2. 縮放動(dòng)畫 */
.img {
transform: scale(1);
transition: transform 0.5s ease;
}
.img:hover {
transform: scale(1.5);
}
/* 3. 旋轉(zhuǎn)動(dòng)畫 */
.btn {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 4. 淡入淡出動(dòng)畫 */
.opacity {
opacity: 0;
transition: opacity 0.5s ease;
}
.opacity:hover {
opacity: 1;
}

以上都是簡單的CSS動(dòng)畫特效實(shí)現(xiàn)方法，通過應(yīng)用這些特效可以讓網(wǎng)頁更加生動(dòng)有趣。