CSS（層疊樣式表）可以做許多有趣的事情，其中之一就是創造各種音效。在這篇文章中，我們將探討一種非常特殊的音效——弦樂音。讓我們看看如何使用 CSS 創造這種獨特的音效。

// 定義基本樣式
.music-note {
position: relative;
width: 10px;
height: 30px;
background: #000;
border-radius: 5px;
}
// 定義弦樂音效
.music-note:before {
content: '';
position: absolute;
width: 10px;
height: 60px;
top: -30px;
left: -3px;
border-radius: 5px;
box-shadow: inset 0 -10px #000, inset 0 -20px #999;
animation: music 1s linear infinite;
transform-origin: bottom center;
}
// 定義音樂律動動畫
@keyframes music {
25% {
transform: scaleY(0.8);
}
50% {
transform: scaleY(1);
}
75% {
transform: scaleY(0.8);
}
}

通過添加偽元素 ":before"，并應用 box-shadow 屬性以及動畫效果，我們可以創造出類似弦樂的音效。在這段代碼中，我們利用了 "transform-origin" 屬性的設置，讓此效果看起來更加真實。

最后，我們可以將音效應用在任何需要這種弦樂音效的元素上。

現在我們可以開始應用這個代碼塊去添加弦樂音效到你的網站上，為你網站的用戶帶來新的視聽體驗。