壳外

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/sea.webp') no-repeat center/cover; color: lightblue; perspective: 1000px; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     .mpic-wrap { position: absolute; bottom: 65px; width: 200px; height: 200px; transform-style: preserve-3d; filter: drop-shadow(10px 10px 6px rgba(0,0,0,.95)); }
   
7.     .mpic { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transition: 1s; }
   
8.     .mpic img { width: 100%; height: 100%; }
   
9.     .mpic:nth-of-type(2) { transform: rotateY(-180deg); }
   
10.     .mpic-wrap:hover .mpic:nth-of-type(1) { transform: rotateY(180deg); }
    
11.     .mpic-wrap:hover .mpic:nth-of-type(2) { transform: rotateY(0); }   
    
12. </style>
    
13. 
    
14. <div id="pa" class="pa">
    
15.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2405811/00/02/05/5b4f95c2beae1.mp4" autoplay loop muted></video>
    
16.     <div class="mpic-wrap">
    
17.         <div class="mpic">
    
18.             <img src="https://638183.freep.cn/638183/t22/hl/fish.gif" />
    
19.         </div>
    
20.         <div class="mpic">
    
21.             <img id="p1" class="rot" src="https://638183.freep.cn/638183/small/webp/hdxk.webp" />
    
22.         </div>
    
23.     </div>
    
24. </div>
    
25. 
    
26. <script>
    
27.     var options = {
    
28.         pa: '.pa',
    
29.         urls: [['https://music.163.com/song/media/outer/url?id=1991816681', '壳外']],
    
30.         btns: [p1],
    
31.     };
    
32. 
    
33.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);
    
34. 
    
35.     function tzRun() {
    
36.         var aud = new AudPlayer(options);
    
37.     }
    
38. 
    
39.     function loadJs(url, callback) {
    
40.         var script = document.createElement('script');
    
41.         script.charset = 'utf-8';
    
42.         script.src = url;
    
43.         script.onload = function() {
    
44.             if (callback) callback();
    
45.         };
    
46.         document.head.appendChild(script);
    
47.     }
    
48. </script>

复制代码

马黑黑

辅助小播实现方法请参阅：

https://www.huachaowang.com/foru ... hread&tid=95858

霜染枫丹

马老师上午好~~

今天天气很沉闷，希望这首音乐把雨给轰下来。这个小播一定会中奖！
感谢您的分享，恭祝秋安

杨帆

构思新颖，小播别致，效果漂亮，示范精彩

红影

有趣，把翻转小图做成了播放器按钮。这个背景和音乐都很奇妙。
欣赏黑黑好帖