江河水
<style>#papa { left: -242px; width: 1080px; height: 664px; background: gray url('https://638183.freep.cn/638183/t22/hl/river.jpg'); overflow: hidden; box-shadow: 3px 3px 20px #000; position: relative; }
#boat { position: absolute; width: 200px; height: 118px; top: calc(100% - 150px); filter: blur(1px); animation: boating 20s linear infinite; }
#playbox { position: absolute; left: 10px; bottom: 10px; padding: 10px; background: rgba(255,255,255,.2); border-radius: 6px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#playbox span { margin-left: 10px; font: normal 1.2em sans-serif; color: #eee; text-shadow: 1px 1px 1px #000; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; outline: none; border: none; }
#btnplay:hover { background: #aaa; color: #ff0000; cursor: pointer; }
@keyframes boating { from { left: 100%; } to { left: -200px; } }
</style>
<div id="papa">
<img id="boat" src='https://638183.freep.cn/638183/t22/hl/boat.gif' alt="" />
<div id="playbox"><input id="btnplay" type="button" value=">" /><span>于红梅 - 江河水</span></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35847825.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
</script> 这个帖子用了简化版的播放器，适合纯音乐帖子使用。全帖代码：
<style>
#papa { left: -242px; width: 1080px; height: 664px; background: gray url('https://638183.freep.cn/638183/t22/hl/river.jpg'); overflow: hidden; box-shadow: 3px 3px 20px #000; position: relative; }
#boat { position: absolute; width: 200px; height: 118px; top: calc(100% - 150px); filter: blur(1px); animation: boating 20s linear infinite; }
#playbox { position: absolute; left: 10px; bottom: 10px; padding: 10px; background: rgba(255,255,255,.2); border-radius: 6px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#playbox span { margin-left: 10px; font: normal 1.2em sans-serif; color: #eee; text-shadow: 1px 1px 1px #000; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; outline: none; border: none; }
#btnplay:hover { background: #aaa; color: #ff0000; cursor: pointer; }
@keyframes boating { from { left: 100%; } to { left: -200px; } }
</style>
<div id="papa">
<img id="boat" src='https://638183.freep.cn/638183/t22/hl/boat.gif' alt="" />
<div id="playbox"><input id="btnplay" type="button" value=">" /><span>于红梅 - 江河水</span></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35847825.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
</script>
拟遴选的二胡曲《江河水》激越悲愤有力，感染力极强。 这个看到水了{:4_173:} 这个动态小船真灵动，和河面上另一条小船遥遥相对，好漂亮的山水。欣赏黑黑好帖{:4_187:} 马黑黑 发表于 2022-7-24 08:38
这个帖子用了简化版的播放器，适合纯音乐帖子使用。全帖代码：
嗯，这个代码看着更简洁。黑黑又带来新的播放器形式{:4_199:} 红影 发表于 2022-7-24 10:31
嗯，这个代码看着更简洁。黑黑又带来新的播放器形式
这个之前也有过类似的，可能你没注意点 红影 发表于 2022-7-24 10:30
这个动态小船真灵动，和河面上另一条小船遥遥相对，好漂亮的山水。欣赏黑黑好帖
代码非常简单，几乎一看就懂吧 绿叶清舟 发表于 2022-7-24 10:05
这个看到水了
江河水还木有干涸 梦油 发表于 2022-7-24 10:04
拟遴选的二胡曲《江河水》激越悲愤有力，感染力极强。
这曲子非常经典，是民乐的瑰宝 马黑黑 发表于 2022-7-24 11:21
这曲子非常经典，是民乐的瑰宝
是的，黑黑朋友。大凡民乐演唱会都能听到《江河水》的声音。 黑黑辛苦，又一个简洁的播放器{:4_178:} 这个一图一个音乐很合适最近的活动做帖，大神你太给力了{:4_170:} 小辣椒 发表于 2022-7-24 11:26
这个一图一个音乐很合适最近的活动做帖，大神你太给力了
为活动量身定制的，马上套用吧{:4_170:} 梦油 发表于 2022-7-24 11:23
是的，黑黑朋友。大凡民乐演唱会都能听到《江河水》的声音。
嗯。阿炳也拉过此曲，其技艺无人能望其顶背 小辣椒 发表于 2022-7-24 11:25
黑黑辛苦，又一个简洁的播放器
简洁而实用哈 无私奉献{:4_199:} 樵歌 发表于 2022-7-24 11:29
无私奉献
你也用用 马黑黑 发表于 2022-7-24 11:29
简洁而实用哈
是的，刚好活动可以用{:4_189:} 小辣椒 发表于 2022-7-24 11:30
是的，刚好活动可以用
但不要把这个播放器看成是廉价的，它小而美，无价之宝