东篱闲人 发表于 2022-5-19 22:12

太空旅行

本帖最后由 东篱闲人 于 2022-5-19 22:25 编辑 <br /><br /><br><br><div style="LEFT: -200px; WIDTH: 1024px; POSITION: relative; TOP: 130px">
<div style="float:left;border:solid 1px 000;"><img src="https://s1.ax1x.com/2022/05/19/OqUmMq.gif"></div>
<style>
.stage {
      left: 0px;
      width: 1024px;
      height:675px;
      background: #000
      overflow: hidden;
      box-shadow: 2px 2px 8px rgba(0,0,0,.75);
      position: relative;
}
.particle {
      width: var(--ww);
      height: var(--ww);
      left: 50%;
      top: 70%;
      background: #eee;
      display: block;
      position: absolute;
      filter: blur(1px);
      animation: up var(--ss) linear infinite;
}

.particle::before, .particle::after {
      position: absolute;
      content: '';
      width: inherit;
      height: inherit;
      background: #eee;
}

.particle::before {
      top: -40px;
      animation: up calc(var(--ss) + 1s) 1.2s linear infinite;
}
.particle::after {
      top: -40px;
      animation: up calc(var(--ss) - 1s) .5s linear infinite;
}

@keyframes up {
      to { transform: translate(var(--hh),calc(var(--hh) / 1.5)) rotate(var(--deg)); }
}

</style>

<div class="stage">
      <div class="particle"></div>
</div>

<script>

let stage = document.querySelector('.stage');
let ww = 3;
let total = 100;
let pStr = '';

for(j=0; j< total; j++){
      let ss = getNum(5,20);
      let deg = getNum(15,720);
      let hh = -500;
      pStr += `<span class='particle' style='--ss: ${ss}s; --hh: ${hh}px; --deg: ${deg}deg; --ww: ${ww}px;)'></span>`;
}
stage.innerHTML = pStr;

let au = document.createElement('iframe');
au.src = 'https://music.163.com/outchain/player?type=2&id=34341364&auto=1&height=66';
au.style.display = 'none';
stage.appendChild(au);

function getNum(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }

</script>

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

来自平行世界的人就是不简单

东篱闲人 发表于 2022-5-19 22:18

马黑黑 发表于 2022-5-19 22:17
来自平行世界的人就是不简单

嗯嗯，自动挡双离合的。。。{:5_117:}

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

这个场景极好，适合粒子的表现

马黑黑 发表于 2022-5-19 22:19

东篱闲人 发表于 2022-5-19 22:18
嗯嗯，自动挡双离合的。。。

估计导航除了用北斗，还内部使用了5G通信技术

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

哈哈，把队长弄太空去了，不知道买没买回程票{:4_172:}

大猫咪 发表于 2022-5-19 22:22

老头来了 晚上好   {:4_187:}让队长飞一下啊 {:5_106:} 遨游太空

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

哇噻，老兄怎么不跟我一起去玩啊。。。。。{:4_189:}

东篱闲人 发表于 2022-5-19 22:27

加林森 发表于 2022-5-19 22:23
哇噻，老兄怎么不跟我一起去玩啊。。。。。

恐高。{:5_117:}

东篱闲人 发表于 2022-5-19 22:27

红影 发表于 2022-5-19 22:20
哈哈，把队长弄太空去了，不知道买没买回程票

他还没玩够。。。{:5_117:}

东篱闲人 发表于 2022-5-19 22:28

大猫咪 发表于 2022-5-19 22:22
老头来了 晚上好   让队长飞一下啊遨游太空

嗯嗯，他有冒险精神。。。{:5_117:}

大猫咪 发表于 2022-5-19 22:28

东篱闲人 发表于 2022-5-19 22:28
嗯嗯，他有冒险精神。。。

{:4_172:}

东篱闲人 发表于 2022-5-19 22:29

大猫咪 发表于 2022-5-19 22:28


嗯嗯，不怕摔。。。。{:4_181:}

醉美水芙蓉 发表于 2022-5-19 22:31

加林森 发表于 2022-5-19 22:32

东篱闲人 发表于 2022-5-19 22:27
恐高。

我难道就不怕。。。？{:5_158:}

东篱闲人 发表于 2022-5-20 08:57

醉美水芙蓉 发表于 2022-5-19 22:31
哈哈！队长遨游太空去了！东篱老师制图想象力丰富！

嗯嗯，让加加尝尝高科技的福利。。。。{:5_117:}

东篱闲人 发表于 2022-5-20 08:57

加林森 发表于 2022-5-19 22:32
我难道就不怕。。。？

你不是一般人。。。。{:4_170:}

加林森 发表于 2022-5-20 09:44

东篱闲人 发表于 2022-5-20 08:57
你不是一般人。。。。

那是啥人。。。。{:5_158:}

东篱闲人 发表于 2022-5-20 15:56

加林森 发表于 2022-5-20 09:44
那是啥人。。。。

圣人。

加林森 发表于 2022-5-20 16:38

东篱闲人 发表于 2022-5-20 15:56
圣人。

不可能的，平凡的人做平凡的事。
页: [1] 2
查看完整版本: 太空旅行