加林森 发表于 2022-5-17 15:01

《依然热爱生活》-α·Pav （根据老黑-黑洞教程制作）

本帖最后由 加林森 于 2022-5-17 18:24 编辑 <br /><br /><style>
.bgBox {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1280px;
      height: 768px;
      left: -342px;
      overflow: hidden;
      background: #000 url('https://pic.imgdb.cn/item/6283445a094754312970b850.jpg') no-repeat;
      overflow:
      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 = 100;
let sStr = '';
for(j=0; j<total; j++){
      let ww = getNum(20,30);
      let bg = `background: linear-gradient(120deg, ${setRgb()}, ${setRgb()}`;
      let xx = getNum(-300,300);
      let yy = getNum(-280,280) ;
      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=1892503990&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>

加林森 发表于 2022-5-17 15:02

@马黑黑

梦油 发表于 2022-5-17 16:55

好像到了黑风洞，嘿嘿！

醉美水芙蓉 发表于 2022-5-17 16:57

加林森 发表于 2022-5-17 17:07

梦油 发表于 2022-5-17 16:55
好像到了黑风洞，嘿嘿！

老梦喜欢就好。

加林森 发表于 2022-5-17 17:08

醉美水芙蓉 发表于 2022-5-17 16:57
队长这么快就学会了！好厉害哦！

一般一般。主要还是要调整的。

梦油 发表于 2022-5-17 17:42

加林森 发表于 2022-5-17 17:07
老梦喜欢就好。

你去过马来西亚的黑风洞吗？

加林森 发表于 2022-5-17 18:09

梦油 发表于 2022-5-17 17:42
你去过马来西亚的黑风洞吗？

去过的。

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

队长这个是真正的黑洞

加林森 发表于 2022-5-17 18:18

马黑黑 发表于 2022-5-17 18:15
队长这个是真正的黑洞

是的。我调整了数据的，不然就跑出去了。

马黑黑 发表于 2022-5-17 18:19

加林森 发表于 2022-5-17 18:18
是的。我调整了数据的，不然就跑出去了。

防止跑出去，可以在主窗体用：

overflow: hidden;

加林森 发表于 2022-5-17 18:22

马黑黑 发表于 2022-5-17 18:19
防止跑出去，可以在主窗体用：

overflow: hidden;

哦，明白了。谢谢！

马黑黑 发表于 2022-5-17 18:23

加林森 发表于 2022-5-17 18:22
哦，明白了。谢谢！

我的帖子是有这句的吧？

加林森 发表于 2022-5-17 18:30

马黑黑 发表于 2022-5-17 18:23
我的帖子是有这句的吧？

现在我加起了，就跑不出去了。

红影 发表于 2022-5-17 19:20

这个像是血管里的血小板{:4_173:}队长真勤奋，给队长点赞{:4_187:}

加林森 发表于 2022-5-17 19:24

红影 发表于 2022-5-17 19:20
这个像是血管里的血小板队长真勤奋，给队长点赞

这个才是真正的黑洞了。{:4_189:}

马黑黑 发表于 2022-5-17 19:30

加林森 发表于 2022-5-17 18:30
现在我加起了，就跑不出去了。

是的

加林森 发表于 2022-5-17 19:41

马黑黑 发表于 2022-5-17 19:30
是的

嗯嗯，谢谢了！

梦油 发表于 2022-5-17 20:13

加林森 发表于 2022-5-17 18:09
去过的。

你的制作让我立即联想到马来西亚的黑风洞了。

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

梦油 发表于 2022-5-17 20:13
你的制作让我立即联想到马来西亚的黑风洞了。

嗯嗯，你感觉像不像？
页: [1] 2
查看完整版本: 《依然热爱生活》-α·Pav （根据老黑-黑洞教程制作）