梦风雨 发表于 2024-6-15 15:44

倾听音

本帖最后由 梦风雨 于 2024-6-15 15:46 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 831px);
width: 1500px; height: 800px;
background: url('https://bohann.net/data/attachment/forum/202406/14/223547zk4k4qwclkx53w41.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#vid {
    position: absolute;
    width: 110%;
    height: 120%;
                top:-80px;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
    opacity: .56;
}
</style>
<div id="papa"><video id="vid" src="https://zgsy-1254134120.cos.ap-guangzhou.myqcloud.com/Close%only.mp4" autoplay="" loop="" muted=""></video></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1353034144.mp3" autoplay="" loop=""></audio>
<script>
(function() {
let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/line_lrc.js';
    script.charset = 'utf-8';
    document.head.appendChild(script);

    let geci = [
    ,
];
window.onload = () => {
    HCPlayer({
      papa: '#papa',
      lrcAr: geci,
      lrc_css: `
            top: 20px;
            color: #999;
            --bg: linear-gradient(rgba(250,250,250,.25),rgba(138,64,30,.65));
      `,
      player_css: `
            bottom: 2%;

            color: lightblue;
            z-index: 100;
            --track: darkgray;
            --prog:black;
      `,
      fs_css: `bottom: 30px;left:10px; background: transparent;--color: white;`,
      title: '刀朗-秋风',
    });

    let mkClover = (ele,num) => {
      let r = ele.offsetWidth / 2, pathAr = [];
      for(let i = 0; i < 200; i ++) {
            let angle = i * 2 * Math.PI / 200;
            let x = r - r * Math.sin(num * angle) * Math.cos(angle);
            let y = r - r * Math.sin(num * angle) * Math.sin(angle);
            pathAr.push(x + 'px ' + y + 'px');
      }
      return 'polygon(' + pathAr.join(', ') + ')';
    }

    Array.from({length: 16}).forEach((item) => {
      let ww = 50 + Math.floor(Math.random() * 50);
      let ar = ;
      item = document.createElement('span');
      item.className = 'clover';
      item.style.cssText += `
            --deg: ${60 - Math.random() * 150}deg;
            --delay: ${Math.random() * 20 - 20}s;
            width: ${ww}px;
            height: ${ww}px;
            right: 200px;
      `;
      papa.appendChild(item);
      item.style.clipPath = mkClover(item, ar);
    });
};
})();

setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

小辣椒 发表于 2024-6-15 16:57

欢迎梦风雨一起玩播放器，你这个视频链接是失效的，没有出来

小辣椒 发表于 2024-6-15 16:59

这个转盘效果很美的，感谢精彩分享{:4_171:}

绿叶清舟 发表于 2024-6-15 20:43

播放器简洁漂亮，欢迎梦风雨常来玩{:4_204:}

梦风雨 发表于 2024-6-15 21:34

本帖最后由 梦风雨 于 2024-6-15 21:53 编辑

小辣椒 发表于 2024-6-15 16:57
欢迎梦风雨一起玩播放器，你这个视频链接是失效的，没有出来问好，祝快乐每天。{:4_191:}

梦风雨 发表于 2024-6-15 21:35

本帖最后由 梦风雨 于 2024-6-15 21:52 编辑

绿叶清舟 发表于 2024-6-15 20:43
播放器简洁漂亮，欢迎梦风雨常来玩
问好，祝新的一天开心。{:4_191:}

红影 发表于 2024-6-15 22:50

漂亮的制作，很养眼。欣赏梦风雨好帖{:4_187:}

梦风雨 发表于 2024-6-16 08:28

红影 发表于 2024-6-15 22:50
漂亮的制作，很养眼。欣赏梦风雨好帖

问好红影，多谢临帖支持鼓励。祝新一天开心{:4_191:}

红影 发表于 2024-6-16 13:29

梦风雨 发表于 2024-6-16 08:28
问好红影，多谢临帖支持鼓励。祝新一天开心

不客气啊，问好梦风雨，周日快乐{:4_187:}

梦风雨 发表于 2024-6-16 17:38

红影 发表于 2024-6-16 13:29
不客气啊，问好梦风雨，周日快乐

问好红影，周日快乐。{:4_191:}

红影 发表于 2024-6-17 09:53

梦风雨 发表于 2024-6-16 17:38
问好红影，周日快乐。

一起快乐{:4_187:}

绿叶清舟 发表于 2024-6-19 21:00

梦风雨 发表于 2024-6-15 21:35
问好，祝新的一天开心。

客气了啊，一起开心
页: [1]
查看完整版本: 倾听音