论坛 › 动画音画 › 《我没有骗你》林淑容

焱鑫磊 发表于 2023-9-19 22:25

《我没有骗你》林淑容

<p>&nbsp;</p>

<p>&nbsp;</p>

<meta charset="utf-8">
   <style>
#mydiv {
      margin: 50px 0 0 calc(50% - 680px);
      display: grid;
      place-items: center;
      width: 1200px;
      height: 640px;
      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/6509a6a2c458853aef30e279.gif') 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://i.mp3.wf/view.php/b7db8e140758608f43f5aecaae9a06d3.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>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

红影 发表于 2023-9-19 22:40

制作很漂亮，欣赏焱鑫磊好帖{:4_199:}

冬天的雨 发表于 2023-9-19 22:42

制作漂亮的，赞一记！

冬天的雨 发表于 2023-9-19 22:43

全屏欣赏的文字可以再移动下面一点，在播放器下面，这样看上去更加完美

世外桃源 发表于 2023-9-20 10:39

欣赏欣赏{:4_199:}

焱鑫磊 发表于 2023-9-20 11:05

红影 发表于 2023-9-19 22:40
制作很漂亮，欣赏焱鑫磊好帖

问好红影！{:4_187:}

焱鑫磊 发表于 2023-9-20 11:05

冬天的雨 发表于 2023-9-19 22:42
制作漂亮的，赞一记！

{:4_176:}

焱鑫磊 发表于 2023-9-20 11:06

冬天的雨 发表于 2023-9-19 22:43
全屏欣赏的文字可以再移动下面一点，在播放器下面，这样看上去更加完美

{:4_204:}

焱鑫磊 发表于 2023-9-20 11:06

世外桃源 发表于 2023-9-20 10:39
欣赏欣赏

{:4_187:}{:4_187:}{:4_187:}

红影 发表于 2023-9-20 18:55

焱鑫磊 发表于 2023-9-20 11:05
问好红影！

问好焱鑫磊，晚上好{:4_187:}

查看完整版本: 《我没有骗你》林淑容