绿叶清舟 发表于 2022-8-19 10:59

【末伏消暑】第五天 萤火虫


<style>
      #papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://pic.imgdb.cn/item/62fefbdf16f2c2beb1de3ace.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; }
      #disc { position: absolute; width: 40px; height: 40px; left: 10px; bottom: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
      #lrcbox { position: absolute; left: 60px; bottom: 10px;font: bold 22px / 40px sans-serif; color: lightblue; text-shadow: 2px 2px 4px #222; }
      .meteor { position: absolute; width: 3px; height: 3px; left: 100px; top: 100px; border-radius: 50px; background: #02ff21; }
      @keyframes flow { from { transform: translate(var(--startX), var(--startY));opacity: 1;} to { transform: translate(var(--endX), var(--endY)); opacity: 0; } }
      @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <span id="lrcbox">Loading ...</span>
      <span id="disc"></span>
</div>

<script>
let stars = new Array(100), aud = new Audio();
let w = papa.offsetWidth, h = papa.offsetHeight;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let lrcAr = [
      ['0.06','萤火虫 - 单依纯'],
      
];
aud.loop = true;
aud.autoplay = true;
aud.src = 'http://music.163.com/song/media/outer/url?id=1969325553.mp3';

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');

for(j = 0; j < stars.length; j ++) {
      let star = document.createElement('span');
      star.className = 'meteor';
      let x1 = num(0, w-5);
      let y1 = num(0, h/4);
      let x2 = x1 + num(50, 100);
      let y2 = y1 + num(20, 50);
      star.style.cssText += `width: ${num(1,4)}px; height: ${num(1,4)}px; left: ${x1}px; top: ${y1}px; --startX: ${x1}px; --startY: ${y1}px; --endX: ${x2}px; --endY: ${y2}px; animation: flow linear 1s ${j*.1}s infinite`;
      papa.appendChild(star);
      stars = star;
}
aud.addEventListener('timeupdate',function(){
      let tt = aud.currentTime;
      for(j=0; j<lrcAr.length; j++){
                if(tt >= lrcAr){
                        lrcbox.innerHTML = lrcAr;
                }
      }
})
</script>

樵歌 发表于 2022-8-19 11:08

大师音画，便仲夏夜更加幽深清凉，令人浮想连翩。

红影 发表于 2022-8-19 14:57

清舟把颜色都换成绿色的了，还真的像星星点点的萤火虫呢。真漂亮的制作{:4_187:}

绿叶清舟 发表于 2022-8-19 19:56

樵歌 发表于 2022-8-19 11:08
大师音画，便仲夏夜更加幽深清凉，令人浮想连翩。

樵歌想到谁了啊{:4_189:}

绿叶清舟 发表于 2022-8-19 19:57

红影 发表于 2022-8-19 14:57
清舟把颜色都换成绿色的了，还真的像星星点点的萤火虫呢。真漂亮的制作

看到那个贴就想到这只虫了{:4_189:}

红影 发表于 2022-8-19 21:36

绿叶清舟 发表于 2022-8-19 19:57
看到那个贴就想到这只虫了

弄出了新的效果新的感受，真棒{:4_187:}

樵歌 发表于 2022-8-19 22:06

绿叶清舟 发表于 2022-8-19 19:56
樵歌想到谁了啊

想到的人她装迷糊{:4_173:}

加林森 发表于 2022-8-19 23:22

好玩好玩。{:4_199:}

绿叶清舟 发表于 2022-8-20 19:33

红影 发表于 2022-8-19 21:36
弄出了新的效果新的感受，真棒

本来想再改大点了，变了几个数字没变化了

绿叶清舟 发表于 2022-8-20 19:34

樵歌 发表于 2022-8-19 22:06
想到的人她装迷糊

这么笨的啊，敲醒她{:4_189:}

绿叶清舟 发表于 2022-8-20 19:34

加林森 发表于 2022-8-19 23:22
好玩好玩。

队长一起玩啊

加林森 发表于 2022-8-20 19:42

绿叶清舟 发表于 2022-8-20 19:34
队长一起玩啊

我已经玩了一个出来了。{:4_189:}

绿叶清舟 发表于 2022-8-20 19:50

加林森 发表于 2022-8-20 19:42
我已经玩了一个出来了。

队长出品最快的了

加林森 发表于 2022-8-20 19:51

绿叶清舟 发表于 2022-8-20 19:50
队长出品最快的了

是的。反正没有事情干了。{:4_189:}

绿叶清舟 发表于 2022-8-20 20:21

加林森 发表于 2022-8-20 19:51
是的。反正没有事情干了。

这也是事啊{:4_189:}

加林森 发表于 2022-8-20 20:24

绿叶清舟 发表于 2022-8-20 20:21
这也是事啊

是的。每日一帖够了。

樵歌 发表于 2022-8-20 21:45

绿叶清舟 发表于 2022-8-20 19:34
这么笨的啊，敲醒她

下不了手呵{:4_173:}

红影 发表于 2022-8-20 22:53

绿叶清舟 发表于 2022-8-20 19:33
本来想再改大点了，变了几个数字没变化了

现在也很美，清舟弄出的色彩总是很奇妙{:4_187:}

绿叶清舟 发表于 2022-8-24 19:55

樵歌 发表于 2022-8-20 21:45
下不了手呵

要不要帮忙啊{:4_189:}

绿叶清舟 发表于 2022-8-24 19:56

红影 发表于 2022-8-20 22:53
现在也很美，清舟弄出的色彩总是很奇妙

那是PS强大了
页: [1] 2
查看完整版本: 【末伏消暑】第五天 萤火虫