论坛 › 动画音画 › 大西厢

马黑黑 发表于 2023-8-4 08:00

大西厢

<style>
#mydiv { margin: 0 0 0 calc(50% - 593px); 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; }
#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; }
#mydiv::after { left: calc(50% + 100px); --deg1: 0; --deg2: -720deg; }
pre { font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; white-space: pre-wrap; }
#codePre { font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
.zhushi { color: green; }
@keyframes fly { from { transform: rotate(var(--deg1)) translate(200px) scale(.8); } to { transform: rotate(var(--deg2)) translate(200px) scale(1.2); } }
</style>

<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=136724" autoplay loop></audio>

马黑黑 发表于 2023-8-4 08:01

本帖最后由 马黑黑 于 2023-8-4 08:10 编辑 <br /><br /><p>配置代码：</p>
<pre id="codePre">

&lt;script&gt;

(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 = [];
    window.onload = () => {
      HCPlayer({
            papa: '#mydiv', <span class="zhushi">/* 宿主元素 */</span>
            lrcAr: geci, <span class="zhushi">/* 歌词 */</span>
            lrc_css: `
                top: 10px;
                color: lightblue; <span class="zhushi">/* 歌词底色 */</span>
                --bg: linear-gradient(rgba(10,200,100,.25),rgba(10,200,100,.7));<span class="zhushi">/* 歌词同步颜色 */</span>
            `,
            player_css: `
                bottom: 80px;
                --ww: 120px; <span class="zhushi">/* 按钮面板宽度 */</span>
                --hh: 80px; <span class="zhushi">/* 按钮面板高度 */</span>
            `,
            btn_css: `
                --btnColor: #eee;<span class="zhushi">/* 全屏按钮文本颜色 */</span>
                --btnBg: #333;<span class="zhushi">/* 全屏按钮背景色 */</span>
            `,
            ttAr: ['瑞鸣','音乐','东北','二人转','乐器演奏','大西厢'], <span class="zhushi">/* 按钮面板文本 */</span>
      });
    }
})();

&lt;/script&gt;

</pre>

<script>

let runCodes = (str) => {
    let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
    let js_str = str.match(reg);
    js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
    let func = new Function(js_str);
    func();
};

runCodes(codePre.innerText);

</script>

马黑黑 发表于 2023-8-4 08:20

帖子完整代码
<style>
#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; }
#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; }
#mydiv::after { left: calc(50% + 100px); --deg1: 0; --deg2: -720deg; }
@keyframes fly { from { transform: rotate(var(--deg1)) translate(200px) scale(.8); } to { transform: rotate(var(--deg2)) translate(200px) scale(1.2); } }
</style>

<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=136724" autoplay loop></audio>

<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 = [];
    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>

花飞飞 发表于 2023-8-4 09:30

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

花飞飞 发表于 2023-8-4 09:30

两个圆片跑得太快，逮半天没逮住。。。{:4_170:}

马黑黑 发表于 2023-8-4 09:31

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

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

花飞飞 发表于 2023-8-4 09:42

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

知道，逮着玩的。

红影 发表于 2023-8-4 09:53

那两个手绢还是代码做的，厉害了{:4_199:}

红影 发表于 2023-8-4 09:56

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

红影 发表于 2023-8-4 10:02

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

醉美水芙蓉 发表于 2023-8-4 12:03

马黑黑 发表于 2023-8-4 12:28

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

还看的过去吧

马黑黑 发表于 2023-8-4 12:29

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

谢谢{:4_190:}

马黑黑 发表于 2023-8-4 12:29

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

一种抽象模拟

马黑黑 发表于 2023-8-4 12:29

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

你也为是逮老鼠呀{:4_170:}

马黑黑 发表于 2023-8-4 12:30

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

指功要厉害

马黑黑 发表于 2023-8-4 12:31

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

这是用渐变背景做的

红影 发表于 2023-8-4 13:01

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

还挺像二人转里的运作呢{:4_173:}

红影 发表于 2023-8-4 13:03

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

那个肯定要练的，不是那么简单就弄得起来呢{:4_173:}

红影 发表于 2023-8-4 13:04

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

而且有repeating，这个图案真漂亮{:4_204:}

查看完整版本: 大西厢