|
|

楼主 |
发表于 2022-5-18 13:22
|
显示全部楼层
完整代码:
- <style>
- .stage {
- left: -302px;
- width: 1200px;
- height:600px;
- background: #000 url('/data/attachment/forum/202205/18/124815o6t0rzts6v3acp3s.jpg') no-repeat;
- 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=1471588618&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>
复制代码
|
|