CSS中可以使用音頻標簽(
<audio>)來播放音頻,而使用CSS樣式可以讓音頻循環播放。
首先,我們需要在HTML中添加音頻標簽:
<audio autoplay loop> <source src="audio.mp3" type="audio/mpeg"> </audio>
這里的autoplay
屬性指定了自動播放音頻,loop
屬性指定了循環播放音頻。
現在,我們可以使用CSS樣式來進一步控制音頻的循環播放效果。其中,animation
屬性可以指定一個動畫效果,而infinite
關鍵字可以讓動畫無限循環。
<style> audio { animation: spin 4s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } } </style>
這里的spin
是動畫名稱,4s
指定了動畫持續時間為4秒,linear
指定了動畫的速度曲線為線性。在@keyframes
中,我們定義了100%
狀態時旋轉了360deg
,也就是一圈,這樣就可以實現循環旋轉效果。
至此,我們就實現了音頻循環播放的效果。