醉美水芙蓉 发表于 2023-9-8 22:46

为爱受了罪

<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: 160px; right: 500px;
      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 > 255 || num < 0) step = -step;
      mydiv.style.setProperty('--bb', num);
};

Array.from({length: 20}).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:314px; --bg: transparent;',
                player_css: `
                        bottom: 240px; right:260px;
                        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>

红影 发表于 2023-9-8 22:51

真漂亮。欣赏水芙蓉美女好帖{:4_187:}
这个小星星可以移动一下位置呢，否则都落到美女脸上了{:4_173:}

醉美水芙蓉 发表于 2023-9-9 07:04

红影 发表于 2023-9-8 22:51
真漂亮。欣赏水芙蓉美女好帖
这个小星星可以移动一下位置呢，否则都落到美女脸上了

谢谢红影美女欣赏点评！

红影 发表于 2023-9-9 08:04

醉美水芙蓉 发表于 2023-9-9 07:04
谢谢红影美女欣赏点评！

问好水芙蓉美女，早上好{:4_187:}

醉美水芙蓉 发表于 2023-9-9 23:09

红影 发表于 2023-9-8 22:51
真漂亮。欣赏水芙蓉美女好帖
这个小星星可以移动一下位置呢，否则都落到美女脸上了

哪一句是移动小星星的？@红影 美女

红影 发表于 2023-9-10 09:50

醉美水芙蓉 发表于 2023-9-9 23:09
哪一句是移动小星星的？@红影 美女

那个yin-fu {
      position: absolute;
      top: 160px; right: 500px;
。。。。。。

醉美水芙蓉 发表于 2023-9-10 11:59

红影 发表于 2023-9-10 09:50
那个yin-fu {
      position: absolute;
      top: 160px; right: 500px;


谢谢红影指导，代码没有学会。

红影 发表于 2023-9-10 14:08

醉美水芙蓉 发表于 2023-9-10 11:59
谢谢红影指导，代码没有学会。

只是调位置啊，很简单的呢，不会代码都能调的{:4_173:}
页: [1]
查看完整版本: 为爱受了罪