论坛 › 欢乐水吧 › 星光降落（马黑黑原创）

朵拉 发表于 2023-4-17 23:28

星光降落（马黑黑原创）

本帖最后由 朵拉 于 2023-4-17 23:48 编辑 <br /><br /><style>
#papa {
      margin: -80px 00 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: url('https://pic.imgdb.cn/item/643d64290d2dde57778fdf7d.jpg') center/cover no-repeat;
      overflow: hidden;
      position: relative;
      --state: paused;
}
#mplayer {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      box-shadow: 10px 8px snow;
      cursor: pointer;
      animation: rot 1s infinite linear alternate var(--state);
}
#mplayer::before {
      position: absolute;
      content: '';
      top: 10px;
      left: 10px;
      width: 100%;
      height: 100%;
}
#wrap {
      position: absolute;
      width: 100%;
      height: 50%;
      transform: rotate(-30deg);
}
.line {
      --du: 10s; --delay: 0s;
      position: absolute;
      width: 1px;
      height: 100px;
      top: -200px;
      opacity: .9;
      background: linear-gradient(to top, snow, transparent);
      animation: flow var(--du) var(--delay) infinite linear;
}
@keyframes flow { to { top: 100%; opacity: 0; } }
@keyframes rot { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
</style>

<div id="papa">
      <div id="wrap"></div>
      <div id="mplayer"></div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1862309034" autoplay loop></audio>
</div>

<script>
let total = 40, ww = wrap.offsetWidth;
Array.from({length:total}).forEach((item,key) => {
      let sp = document.createElement('span');
      sp.className = 'line';
      sp.style.cssText += `
                --delay: ${Math.random() * 4 - 4}s;
                --du: ${Math.random() * 8 + 4}s;
                left: ${Math.random() * ww}px;
                height: ${Math.random() * 50 + 50}px;
      `;
      wrap.appendChild(sp);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

朵拉 发表于 2023-4-17 23:50

@马黑黑
马师好，学生交作业咯，请多多拍砖~~{:4_190:}

马黑黑 发表于 2023-4-17 23:52

朵拉 发表于 2023-4-17 23:50
@马黑黑
马师好，学生交作业咯，请多多拍砖~~

金砖刚刚拍完了木有了{:4_170:}

非常开心 发表于 2023-4-18 08:28

精彩的播放器制作，画画很美，曲调旋律优美，

红影 发表于 2023-4-18 09:39

星光在蓝色背景上也很漂亮呢，欣赏朵宝好帖{:4_199:}

红影 发表于 2023-4-18 09:41

这音乐还是高品质的音乐呢，好听。播放器按钮也是月亮，天上2个月亮了{:4_173:}

梦缘 发表于 2023-4-18 19:32

谢谢老师的分享，欣赏问好！{:4_204:}

查看完整版本: 星光降落（马黑黑原创）