|
|

楼主 |
发表于 2022-5-15 22:18
|
显示全部楼层
代码是酱紫:
- <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>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|