朵拉 发表于 2022-5-17 20:27

配乐作品（马黑黑原创）

本帖最后由 朵拉 于 2022-5-17 20:32 编辑 <br /><br /><style>
.bgBox {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 760px;
      height: 600px;
      background: #000;
      overflow: hidden;
      perspective: 2000px;
}
.ball {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: block;
      transform-style: preserve-3d;
      animation: fly 5s var(--ss) linear infinite;
}

@keyframes fly {
      0% { transform: translate3d(var(--tx), var(--ty), var(--tz)); opacity: 0; }
      60% { opacity: 1; }
      100% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
}
</style>

<div class="bgBox"></div>

<script>

let sStr = '';
for(j=0; j<60; j++){
      let ww = getNum(6,12);
      let bg = `background: linear-gradient(120deg, ${setRgb()}, ${setRgb()}`;
      let xx = getNum(-600,600);
      if(xx < 50 && xx > -50) xx = 100;
      let yy = getNum(-600,600) ;
      if(yy < 50 && yy > -50) yy = -100;
      console.log (xx, yy);
      sStr += `<span class='ball' style='--ss: ${getNum(0,4)}s; --tx: ${xx}px; --ty:${yy}px; --tz: ${getNum(10,100)}px; width: ${ww}px; height: ${ww}px; ${bg}'></span>`;
}
document.querySelector('.bgBox').innerHTML += sStr;

function setRgb(){ return `rgba(${getNum(0,255)},${getNum(0,255)}, ${getNum(0,255)})`; }
function getNum(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }

</script>



<audio id="music" autoplay="autoplay" loop="loop" src="http://www.kumeiwp.com/sub/filestores/2022/05/17/711d2398943848bf22602273ecac408b.mp3" ></audio>

朵拉 发表于 2022-5-17 20:33

@马黑黑
马老师好，音乐可以听到吗？{:4_190:}

朵拉 发表于 2022-5-17 20:34

本帖最后由 朵拉 于 2022-5-17 20:37 编辑

走过路过的小伙伴们
音乐可以听到吗{:4_204:}

醉美水芙蓉 发表于 2022-5-17 20:39

加林森 发表于 2022-5-17 20:40

朵拉晚上好。歌曲能听见的。制作得不错啊。{:4_204:}{:4_199:}

红影 发表于 2022-5-17 21:02

能听到的，酷美的音乐这里都能播放的。欣赏朵宝好帖{:4_187:}

大猫咪 发表于 2022-5-17 21:08

真好听， {:4_187:}   朵拉晚上好{:4_190:}

马黑黑 发表于 2022-5-17 21:13

朵拉 发表于 2022-5-17 20:33
@马黑黑
马老师好，音乐可以听到吗？

很快

马黑黑 发表于 2022-5-17 21:15

音乐有力度
页: [1]
查看完整版本: 配乐作品（马黑黑原创）