大西厢

马黑黑

马黑黑

配置代码：

<script>

(function() {
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/3dbox6_fs_lrc.js';
    script.charset = 'utf-8';
    document.head.appendChild(script);
    let geci = [[1.2,"大西厢",2.4]];
    window.onload = () => {
        HCPlayer({
            papa: '#mydiv', /* 宿主元素 */
            lrcAr: geci, /* 歌词 */
            lrc_css: `
                top: 10px;
                color: lightblue; /* 歌词底色 */
                --bg: linear-gradient(rgba(10,200,100,.25),rgba(10,200,100,.7));  /* 歌词同步颜色 */
            `,
            player_css: `
                bottom: 80px;
                --ww: 120px; /* 按钮面板宽度 */
                --hh: 80px; /* 按钮面板高度 */
            `,
            btn_css: `
                --btnColor: #eee;  /* 全屏按钮文本颜色 */
                --btnBg: #333;  /* 全屏按钮背景色 */
            `,
            ttAr: ['瑞鸣','音乐','东北','二人转','乐器演奏','大西厢'], /* 按钮面板文本 */
        });
    }
})();

</script>

马黑黑

帖子完整代码

1. <style>
   
2. #mydiv { margin: auto; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp1/daxixl.webp') no-repeat center/cover; display: grid; box-shadow: 0 0 6px gray; z-index: 1; place-items: center; position: relative; --state: running; }
   
3. #mydiv::before, #mydiv::after { position: absolute; content: ''; left: calc(50% - 100px); top: calc(50% - 50px); width: 100px; height: 100px; background: repeating-radial-gradient(#f00, #f00 4px, #ff0 5px, #f00 6px) center / 50% 50%; border-radius: 50%; animation: fly 10s infinite var(--state); --deg1: 0; --deg2: 720deg; }
   
4. #mydiv::after { left: calc(50% + 100px); --deg1: 0; --deg2: -720deg; }
   
5. @keyframes fly { from { transform: rotate(var(--deg1)) translate(200px) scale(.8); } to { transform: rotate(var(--deg2)) translate(200px) scale(1.2); } }
   
6. </style>
   
7. 
   
8. <div id="mydiv"></div>
   
9. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=136724" autoplay loop></audio>
   
10. 
    
11. <script>
    
12. (function() {
    
13.     let script = document.createElement('script');
    
14.     script.src = 'https://638183.freep.cn/638183/web/api/3dbox6_fs_lrc.js';
    
15.     script.charset = 'utf-8';
    
16.     document.head.appendChild(script);
    
17.     let geci = [[1.2,"大西厢",2.4]];
    
18.     window.onload = () => {
    
19.         HCPlayer({
    
20.             papa: '#mydiv',
    
21.             lrcAr: geci,
    
22.             lrc_css: `
    
23.                 top: 10px;
    
24.                 color: lightblue;
    
25.                 --bg: linear-gradient(rgba(10,200,100,.25),rgba(10,200,100,.7));
    
26.             `,
    
27.             player_css: `
    
28.                 bottom: 80px;
    
29.                 --ww: 120px;
    
30.                 --hh: 80px;
    
31.             `,
    
32.             btn_css: `
    
33.                 --btnColor: #eee;
    
34.                 --btnBg: #333;
    
35.             `,
    
36.             ttAr: ['瑞鸣','音乐','东北','二人转','乐器演奏','大西厢'],
    
37.         });
    
38.     }
    
39. })();
    
40. 
    
41. </script>

复制代码

花飞飞

这个花潮论坛欢迎你的播放器。。。也被封装起来了。。。

花飞飞

两个圆片跑得太快，逮半天没逮住。。。

马黑黑

花飞飞 发表于 2023-8-4 09:30
两个圆片跑得太快，逮半天没逮住。。。

装饰作用，模拟二人转的动作，没有交互功能

花飞飞

马黑黑 发表于 2023-8-4 09:31
装饰作用，模拟二人转的动作，没有交互功能

知道，逮着玩的。

红影

那两个手绢还是代码做的，厉害了

红影

那两个手绢就是二人转用的吧，演员可以在手上让它们转起来。
记得去沈阳出差时，还被带去了本山剧场。表演完把手绢抛给了观众，我们 的同行者抢到一块，还挺有点厚度呢，我们一个个去转，谁都转不起来

红影

手绢的运动方式和变形及速度变化也很奇特，真有点看表演的感觉

马黑黑

花飞飞 发表于 2023-8-4 09:30
这个花潮论坛欢迎你的播放器。。。也被封装起来了。。。

还看的过去吧

马黑黑

醉美水芙蓉 发表于 2023-8-4 12:03
很漂亮的作品！好玩！

谢谢

马黑黑

红影 发表于 2023-8-4 10:02
手绢的运动方式和变形及速度变化也很奇特，真有点看表演的感觉

一种抽象模拟

马黑黑

花飞飞 发表于 2023-8-4 09:42
知道，逮着玩的。

你也为是逮老鼠呀

马黑黑

红影 发表于 2023-8-4 09:56
那两个手绢就是二人转用的吧，演员可以在手上让它们转起来。
记得去沈阳出差时，还被带去了本山剧场。表演 ...

指功要厉害

马黑黑

红影 发表于 2023-8-4 09:53
那两个手绢还是代码做的，厉害了

这是用渐变背景做的

红影

马黑黑 发表于 2023-8-4 12:29
一种抽象模拟

还挺像二人转里的运作呢

红影

马黑黑 发表于 2023-8-4 12:30
指功要厉害

那个肯定要练的，不是那么简单就弄得起来呢

红影

马黑黑 发表于 2023-8-4 12:31
这是用渐变背景做的

而且有repeating，这个图案真漂亮