江河水

马黑黑

于红梅 - 江河水

马黑黑

这个帖子用了简化版的播放器，适合纯音乐帖子使用。全帖代码：

1. <style>
   
2. #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; }
   
3. #boat { position: absolute; width: 200px; height: 118px; top: calc(100% - 150px); filter: blur(1px); animation: boating 20s linear infinite; }
   
4. #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; }
   
5. #playbox span { margin-left: 10px; font: normal 1.2em sans-serif; color: #eee; text-shadow: 1px 1px 1px #000; }
   
6. #btnplay { width: 30px; height: 30px; border-radius: 50%; outline: none; border: none; }
   
7. #btnplay:hover { background: #aaa; color: #ff0000; cursor: pointer; }
   
8. @keyframes boating { from { left: 100%; } to { left: -200px; } }
   
9. </style>
   
10. 
    
11. <div id="papa">
    
12.         <img id="boat" src='https://638183.freep.cn/638183/t22/hl/boat.gif' alt="" />
    
13.         <div id="playbox"><input id="btnplay" type="button" value=">" /><span>于红梅 - 江河水</span></div>
    
14. </div>
    
15. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=35847825.mp3" autoplay="autoplay" loop="loop"></audio>
    
16. 
    
17. <script>
    
18. btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
19. aud.addEventListener('playing', () => btnplay.value = '||');
    
20. aud.addEventListener('pause', () => btnplay.value = '>');
    
21. </script>

复制代码

梦油

拟遴选的二胡曲《江河水》激越悲愤有力，感染力极强。

绿叶清舟

这个看到水了

红影

这个动态小船真灵动，和河面上另一条小船遥遥相对，好漂亮的山水。欣赏黑黑好帖

红影

马黑黑 发表于 2022-7-24 08:38
这个帖子用了简化版的播放器，适合纯音乐帖子使用。全帖代码：

嗯，这个代码看着更简洁。黑黑又带来新的播放器形式

马黑黑

红影 发表于 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
这曲子非常经典，是民乐的瑰宝

是的，黑黑朋友。大凡民乐演唱会都能听到《江河水》的声音。

小辣椒

黑黑辛苦，又一个简洁的播放器

小辣椒

这个一图一个音乐很合适最近的活动做帖，大神你太给力了

马黑黑

小辣椒 发表于 2022-7-24 11:26
这个一图一个音乐很合适最近的活动做帖，大神你太给力了

为活动量身定制的，马上套用吧

马黑黑

梦油 发表于 2022-7-24 11:23
是的，黑黑朋友。大凡民乐演唱会都能听到《江河水》的声音。

嗯。阿炳也拉过此曲，其技艺无人能望其顶背

马黑黑

小辣椒 发表于 2022-7-24 11:25
黑黑辛苦，又一个简洁的播放器

简洁而实用哈

樵歌

无私奉献

马黑黑

樵歌 发表于 2022-7-24 11:29
无私奉献

你也用用

小辣椒

马黑黑 发表于 2022-7-24 11:29
简洁而实用哈

是的，刚好活动可以用

马黑黑

小辣椒 发表于 2022-7-24 11:30
是的，刚好活动可以用

但不要把这个播放器看成是廉价的，它小而美，无价之宝