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

人生何处不相逢-To马黑黑老师

<style>
#mydiv {
      margin: 50px 0 0 calc(50% - 720px);
      display: grid;
      place-items: center;
      width: 1275px;
      height: 743px;
      border: 1px solid gray;
      background: linear-gradient(to right bottom, rgba(100,100,var(--bb),.5) 0, rgba(calc(255 - var(--bb)),0,0,.35) 50%), url('https://www.yiyuen.com/e/file/view/627906') no-repeat center/cover;
      overflow: hidden;
      position: relative;
      --state: running;
}
yin-fu {
      position: absolute;
      top: 140px;
      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; } }
</style>

<div id="mydiv"></div>
<audio id="aud" src="https://shuifurong.s3-us-east-1.ossfiles.com/rensheng.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 = ['\u2764','\u2764','\u2764','\u2764','\u2764','\u2764','\u2764','\u2764','\u2764','\u2764','\u2764'];
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: 88%',
                fs_css: 'top: 310px; --bg: transparent;',
                player_css: `
                        top: 300px;
                        border-width: 0;
                        color: #fff;
                        --size: 200px;
                        --bRad: 50%;
                        --track: gray;
                        --prog: orange;
                        --btnBg: linear-gradient(yellow, red);
                `,
                lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
      });
};

</script>

红影 发表于 2023-9-16 11:23

弄了这么多漂亮的动态，这个帖子真漂亮。欣赏水芙蓉美女好帖{:4_199:}

红影 发表于 2023-9-16 11:26

底图还是会变色和伸展的呢，黑黑收礼开心{:4_187:}

红影 发表于 2023-9-16 11:27

这个要是能一键都能控制就更好了{:4_204:}

醉美水芙蓉 发表于 2023-9-16 11:53

红影 发表于 2023-9-16 11:27
这个要是能一键都能控制就更好了

红影美女下午好！代码一键控制不懂，也没有学会！

红影 发表于 2023-9-16 13:26

醉美水芙蓉 发表于 2023-9-16 11:53
红影美女下午好！代码一键控制不懂，也没有学会！

我也不太懂，一般都套用的时候直接用的{:4_173:}

焱鑫磊 发表于 2023-9-16 20:21

图一张，特效这么多，好贴！{:4_187:}

醉美水芙蓉 发表于 2023-9-16 20:30

焱鑫磊 发表于 2023-9-16 20:21
图一张，特效这么多，好贴！

谢谢朋友支持！

醉美水芙蓉 发表于 2023-11-27 20:51

@马黑黑 不知道黑黑老师喜欢什么歌曲？在此感谢黑黑老师无私奉献播放器和代码！

杨柳青 发表于 2023-11-27 21:23

真漂亮~~没的话说~~{:5_116:}

醉美水芙蓉 发表于 2023-11-27 21:31

杨柳青 发表于 2023-11-27 21:23
真漂亮~~没的话说~~

谢谢朋友欣赏支持！祝生日快乐！

马黑黑 发表于 2023-11-27 23:05

红影 发表于 2023-9-16 11:26
底图还是会变色和伸展的呢，黑黑收礼开心

同开同开

马黑黑 发表于 2023-11-27 23:05

醉美水芙蓉 发表于 2023-11-27 20:51
@马黑黑 不知道黑黑老师喜欢什么歌曲？在此感谢黑黑老师无私奉献播放器和代码！

非常感谢
页: [1]
查看完整版本: 人生何处不相逢-To马黑黑老师