醉美水芙蓉 发表于 2023-9-10 19:34:21

为爱受了罪 (Live) - 恋特特

<style>
#mydiv {
      margin: 80px 0 0 calc(50% - 681px);
      display: grid;
      place-items: center;
      width: 1200px;
      height: 675px;
      border: 1px solid gray;
      background: linear-gradient(to right bottom, rgba(66,var(--bb),66,.5) 0, rgba(100,100,calc(255 - var(--bb)),.35) 50%), url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/58c20c3f3305c4bb040d82ed8e615d81.mp4.jpg') no-repeat center/cover;
      overflow: hidden;
      position: relative;
      --state: running;
}
yin-fu {
      position: absolute;
      top: 260px; right: 240px;
      font: bold 30px sans-serif;
      opacity: 1;
      animation: fly 10s var(--delay) infinite var(--state);
}
@keyframes fly { to { transform: rotate(var(--deg)) translateY(-400px); opacity: 0; } }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; opacity: .35; }
</style>

<div id="mydiv"><video id="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/14/35/V-143579-7AB888F8.mp4" autoplay="autoplay" loop="loop" muted="muted" ></video></div>
<audio id="aud" src="https://www.qqmc.com/mp3/music298616795.mp3" loop autoplay></audio>

<script>

let script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
mydiv.appendChild(script);

let num = 0, step = 10;
let degAr = ,
      yinfu = ['\u2605','\u2721','\u2606','\u272f','\u2736','\u2732','\u2734','\u272f','\u272e','\u273b','\u272d'];
let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
let flash = () => {
      num += step;
      if(num > 55 || num < 0) step = -step;
      mydiv.style.setProperty('--bb', num);
};

Array.from({length: 120}).forEach((item,key) => {
      item = document.createElement('yin-fu');
      let idx = Math.floor(Math.random() * yinfu.length);
      item.innerText = yinfu;
      item.style.cssText += `
                color: #${Math.random().toString(16).substr(-6)};
                --deg: ${degAr}deg;/*${60 - Math.random() *120}deg;*/
                --delay: ${Math.random() * -10}s;
      `;
      mydiv.appendChild(item);
});

setInterval(()=> {
      if(aud.paused) return false;
      flash();
},10);

script.onload = () => {
      HCPlayer({
                papa: '#mydiv',
                lrcAr: geci,
                lrc_css: 'top: 40px; left: 60px; --bg: linear-gradient(rgba(30,80,250,.4),rgba(30,80,250,.7));',
                fs_css: 'bottom: 280px; right:214px; --bg: transparent;',
                player_css: `
                        bottom: 240px; right:160px;
                        border-width: 0;
                        color: #fff;
                        --size: 180px;
                        --bRad: 50%;
                        --track: gray;
                        --prog: orange;
                        --btnBg: linear-gradient(yellow, red);
                `,
                lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
      });
};
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

zlpi@163.com 发表于 2023-9-10 19:39:14

欣赏佳作

醉美水芙蓉 发表于 2023-9-10 19:45:25

zlpi@163.com 发表于 2023-9-10 19:39
欣赏佳作

谢谢山里人老师光临支持！

宇神无敌 发表于 2023-9-10 20:45:28

欣赏老师的精彩，好看好听！:hug:

醉美水芙蓉 发表于 2023-9-10 21:18:05

宇神无敌 发表于 2023-9-10 20:45
欣赏老师的精彩，好看好听！

谢谢朋友支持！

确认过眼神 发表于 2023-9-12 02:54:06

这个作品漂亮！！！！

蓝叶 发表于 2023-9-13 17:06:35

这个作品漂亮！！！！

醉美水芙蓉 发表于 2023-9-13 17:32:18

确认过眼神 发表于 2023-9-12 02:54
这个作品漂亮！！！！

谢谢朋友光临！

醉美水芙蓉 发表于 2023-9-13 17:32:41

蓝叶 发表于 2023-9-13 17:06
这个作品漂亮！！！！

谢谢朋友光临！

翁奕童苑 发表于 2023-9-13 19:53:56

精彩音画分享！
页: [1] 2
查看完整版本: 为爱受了罪 (Live) - 恋特特