|
|

楼主 |
发表于 2022-7-16 18:08
|
显示全部楼层
代码:(珠子原理请到后院查阅)
- <style>
- #papa {
- left: -214px;
- width: 1024px;
- height: 600px;
- box-shadow: 3px 3px 30px #000;
- overflow: hidden;
- position: relative;
- }
- #ball {
- position: absolute;
- left: 50%;
- bottom: -20px;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- transition: box-shadow 5s ease;
- }
- </style>
- <div id="papa">
- <div id="ball"></div>
- </div>
- <script>
- let flag = 0;
- let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
- setInterval(() => {
- flag == 0 ? (ball.style.boxShadow = explode(num(50,200)), flag = 1) : (ball.style.boxShadow = 'none', flag = 0);
- },5000);
- function explode(total) {
- let str = '';
- Array.from({length: total}).forEach((ele) => {
- str += `${num(-500,500)}px ${num(-600,-100)}px 0 rgb(${num(0,255)}, ${num(0,255)}, ${num(0,255)}),`;
- });
- str = str.substring(0,str.length - 1);
- return str;
- }
- </script>
复制代码
|
|