CSS3音樂動畫是一種流行的設(shè)計元素，它可以使你的網(wǎng)站更加生動有趣。下面，我們將介紹一些常用的CSS3音樂動畫代碼。

/* 建立一個動畫容器 */
@keyframes music {
0% {
transform: rotate(0deg); /* 初始角度為0度 */
}
100% {
transform: rotate(360deg); /* 旋轉(zhuǎn)一周，角度為360度 */
}
}
/* 將動畫效果應(yīng)用于圖標(biāo) */
.icon {
animation: music 1s infinite; /* 每次旋轉(zhuǎn)一周需要1秒，無限循環(huán) */
}

上面的代碼會創(chuàng)建一個旋轉(zhuǎn)的音符圖標(biāo)，它會無限循環(huán)地旋轉(zhuǎn)。

/* 建立一個動畫容器 */
@keyframes beat {
0% {
transform: scale(1); /* 初始大小為1 */
}
50% {
transform: scale(2); /* 每次變化大小為原來的2倍 */
}
100% {
transform: scale(1); /* 恢復(fù)原來的大小 */
}
}
/* 將動畫效果應(yīng)用于按鈕 */
.button {
animation: beat 0.5s infinite; /* 縮放需要0.5秒，無限循環(huán) */
}

上面的代碼會創(chuàng)建一個跳動的按鈕效果，它會無限循環(huán)地縮放。

/* 建立一個動畫容器 */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); /* 初始陰影效果 */
}
70% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); /* 陰影逐漸消失 */
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); /* 恢復(fù)初始陰影效果 */
}
}
/* 將動畫效果應(yīng)用于標(biāo)題 */
h1 {
animation: pulse 2s infinite; /* 陰影效果需要2秒，無限循環(huán) */
}

上面的代碼會創(chuàng)建一個跳動的標(biāo)題效果，它會無限循環(huán)地消失和出現(xiàn)。

以上就是一些常用的CSS3音樂動畫代碼，你可以根據(jù)自己的需要進(jìn)行修改和定制，制作出更加炫酷的效果。