论坛 › 音乐沙龙 › 驿动的心 TO：小辣椒

冬天的雨 发表于 2023-9-13 20:23

驿动的心 TO：小辣椒

<style>
#mydiv {
      margin: 120px 0 0 calc(50% - 700px);
      display: grid;
      place-items: center;
      width: 1232px;
      height: 720px;
      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://pic.imgdb.cn/item/6501a907661c6c8e548e45c4.jpg') no-repeat center/cover;
      overflow: hidden;
      position: relative;
      --state: running;
}
yin-fu {
      position: absolute;
      left: 70%;
      top: 200px;
      font: bold 20px 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: 110%; height: 120%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; opacity: .35; }

</style>

<div id="mydiv"><video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a24c3a4ff5.mp4" autoplay="autoplay" loop="loop" muted="muted" ></video></div>
<audio id="aud" src="https://wj1.zp68.com:812/lxx/dy/18/15.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 = ['\u266C','\u266C','\u266C','\u266C','\u266C','\u266C','\u266C','\u266C','\u266C','\u266C','\u266C'];
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: ' left: 60%; top: 80%;--bg: linear-gradient(rgba(138,43,226,.3),rgba(138,43,226,.7));',
                   fs_css: 'bottom: 290px; right:314px; --bg: transparent;',
                player_css: `
                        bottom: 250px; 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)' },
      });
};

</script>
<br><br>

冬天的雨 发表于 2023-9-13 20:25

@小辣椒

笑我就完成一个作业，冬雨又来了{:4_170:}

冬天的雨 发表于 2023-9-13 20:27

继续练习做，不过感觉做图很花时间的{:4_203:}

小辣椒 发表于 2023-9-13 20:46

冬天的雨 发表于 2023-9-13 20:25
@小辣椒

笑我就完成一个作业，冬雨又来了

冬雨好样的，又做作业了{:4_199:}

冬天的雨 发表于 2023-9-13 20:47

小辣椒 发表于 2023-9-13 20:46
冬雨好样的，又做作业了

表扬一下，顺便再送礼{:4_170:}

小辣椒 发表于 2023-9-13 20:47

冬天的雨 发表于 2023-9-13 20:47
表扬一下，顺便再送礼

我最近状态不好，作图感觉累

冬天的雨 发表于 2023-9-13 20:48

小辣椒 发表于 2023-9-13 20:47
我最近状态不好，作图感觉累

你不是有旧图吗，就用旧图啊

小辣椒 发表于 2023-9-13 20:49

冬天的雨 发表于 2023-9-13 20:48
你不是有旧图吗，就用旧图啊

好吧，我抽时间做个，别嫌弃啊

冬天的雨 发表于 2023-9-13 20:49

小辣椒 发表于 2023-9-13 20:49
好吧，我抽时间做个，别嫌弃啊

不用急，我是开玩笑的，不送没关系

小辣椒 发表于 2023-9-13 20:50

冬天的雨 发表于 2023-9-13 20:49
不用急，我是开玩笑的，不送没关系

好的，一起开心玩就可以了

朵拉 发表于 2023-9-13 20:54

精美的制作，小辣椒管理收礼开心~~{:4_204:}

小辣椒 发表于 2023-9-13 20:56

朵拉 发表于 2023-9-13 20:54
精美的制作，小辣椒管理收礼开心~~

朵拉晚上好{:4_171:}

冬天的雨 发表于 2023-9-13 20:57

朵拉 发表于 2023-9-13 20:54
精美的制作，小辣椒管理收礼开心~~

朵拉来了，喝茶听歌{:4_180:}

朵拉 发表于 2023-9-13 20:57

雨版好，学生咋听不出是姜育恒哈~~{:4_173:}

冬天的雨 发表于 2023-9-13 20:57

小辣椒 发表于 2023-9-13 20:50
好的，一起开心玩就可以了

你还是早下，去休息{:4_197:}{:4_185:}

小辣椒 发表于 2023-9-13 21:00

冬天的雨 发表于 2023-9-13 20:57
你还是早下，去休息

还有许多帖没有回，再回几个就下

冬天的雨 发表于 2023-9-13 21:20

朵拉 发表于 2023-9-13 20:57
雨版好，学生咋听不出是姜育恒哈~~

下载的是姜育恒的歌曲

冬天的雨 发表于 2023-9-13 21:21

小辣椒 发表于 2023-9-13 21:00
还有许多帖没有回，再回几个就下

好的，明天见{:4_179:}

千羽 发表于 2023-9-13 21:23

冬雨的图做得这么好啊，感觉是一位高手{:4_181:}

千羽 发表于 2023-9-13 21:26

天空背景做得太漂亮了，闪烁的光给画面增添了神秘又唯美亮点，棒棒哒{:4_187:}

查看完整版本: 驿动的心 TO：小辣椒