小辣椒 发表于 2022-5-19 21:03

学习黑黑的小圆点出来


<style>
.bgBox {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1280px;
      height: 760px;
      left: -340px;
       top: 150px;
      background: #000 url('https://pic.imgdb.cn/item/628513170947543129d2b2ed.jpg') no-repeat;
      overflow: hidden;
      perspective: 3000px;
}
.ball {
      position: absolute;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: block;
      transform-style: preserve-3d;
      animation: fly var(--ss) linear infinite alternate;
}

.ball::before, .ball::after {
      position: absolute;
      content: '';
      width: 24px;
      height: 24px;
      border-radius: 50%;
      left: -10px;
      top: 5px;
      background:green;
      animation: fly calc(var(--ss) + 1s) linear infinite;
}
.ball::after {
      background: red;
      animation: fly calc(var(--ss) + 2s) linear infinite;
}
@keyframes fly {
      0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
      50% { opacity: .6; }
      100% { transform: translate3d(var(--tx), var(--ty), var(--tz)); opacity: 0; }
}
</style>

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

<script>
let bgBox = document.querySelector('.bgBox');
let total = 200;
let sStr = '';
for(j=0; j<total; j++){
      let ww = getNum(20,30);
      let bg = `background: linear-gradient(120deg, ${setRgb()}, ${setRgb()}`;
      let xx = getNum(-640,640);
      let yy = getNum(-384,384) ;
      sStr += `<span class='ball' style='--ss: ${getNum(4,10)}s; --tx: ${xx}px; --ty:${yy}px; --tz: ${getNum(10,100)}px; width: ${ww}px; height: ${ww}px; ${bg}'></span>`;
}
bgBox.innerHTML += sStr;
let aud = document.createElement('iframe');
aud.src = 'https://music.163.com/outchain/player?type=2&id=1927523515&auto=1&height=66';
aud.style.display = 'none';
bgBox.appendChild(aud);

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>
<br><br><br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-5-19 21:04

谢谢黑黑代码分享， 套用是真的太方便了{:4_199:}
@马黑黑

闲言不语 发表于 2022-5-19 21:05

沙发应该是来宾的

大猫咪 发表于 2022-5-19 21:06

辣椒制作真漂亮， 图片选的好棒   歌也非常好听   晚上好！{:4_187:}{:4_190:}

闲言不语 发表于 2022-5-19 21:07

这效果很科幻。

小辣椒 发表于 2022-5-19 21:09

闲言不语 发表于 2022-5-19 21:05
沙发应该是来宾的

梦梦晚上好，好久好久没有碰到你的{:4_179:}

梧桐影 发表于 2022-5-19 21:11

漂亮！{:5_116:}

小辣椒 发表于 2022-5-19 21:11

大猫咪 发表于 2022-5-19 21:06
辣椒制作真漂亮， 图片选的好棒   歌也非常好听   晚上好！

猫猫 我特意这个歌曲名称不写的，一个小悲伤的歌曲，冬雨分享过的

小辣椒 发表于 2022-5-19 21:12

闲言不语 发表于 2022-5-19 21:07
这效果很科幻。

梦梦这个你可以玩的，黑黑分享了代码我直接套用的

闲言不语 发表于 2022-5-19 21:13

小辣椒 发表于 2022-5-19 21:12
梦梦这个你可以玩的，黑黑分享了代码我直接套用的

你们小青年玩吧，俺当吃瓜观众就行

大猫咪 发表于 2022-5-19 21:14

小辣椒 发表于 2022-5-19 21:11
猫猫 我特意这个歌曲名称不写的，一个小悲伤的歌曲，冬雨分享过的

嗯嗯有印象的，非常好听，{:4_187:}辣椒效果制作的很棒！

好久不见冬小雨，想念！ {:4_190:}

马黑黑 发表于 2022-5-19 21:25

珠子运行的纵深感明显

红影 发表于 2022-5-19 21:45

这个粒子效果，配着这个音乐节奏倒是正好。亲爱的帖子真漂亮{:4_187:}

小辣椒 发表于 2022-5-19 21:49

梧桐影 发表于 2022-5-19 21:11
漂亮！

问好梧桐影 谢谢欣赏{:4_171:}

小辣椒 发表于 2022-5-19 21:49

闲言不语 发表于 2022-5-19 21:13
你们小青年玩吧，俺当吃瓜观众就行

这个你玩才轻松的

小辣椒 发表于 2022-5-19 21:51

大猫咪 发表于 2022-5-19 21:14
嗯嗯有印象的，非常好听，辣椒效果制作的很棒！

好久不见冬小雨，想念！

这首歌的真实意思知道会很悲伤，但不明白意思，感觉很好听的

小辣椒 发表于 2022-5-19 21:51

马黑黑 发表于 2022-5-19 21:25
珠子运行的纵深感明显

黑黑，我试了几个图 感觉这个比较满意{:4_173:}

小辣椒 发表于 2022-5-19 21:52

红影 发表于 2022-5-19 21:45
这个粒子效果，配着这个音乐节奏倒是正好。亲爱的帖子真漂亮

亲爱的，这个效果我发现也是要看图的背景颜色的

大猫咪 发表于 2022-5-19 21:52

小辣椒 发表于 2022-5-19 21:51
这首歌的真实意思知道会很悲伤，但不明白意思，感觉很好听的

嗯嗯很好听   {:4_187:} 循环好几遍{:4_190:}

小辣椒 发表于 2022-5-19 21:58

大猫咪 发表于 2022-5-19 21:52
嗯嗯很好听    循环好几遍

猫猫你也是做一个。。。。。
页: [1] 2
查看完整版本: 学习黑黑的小圆点出来