|
|

楼主 |
发表于 2023-4-16 12:02
|
显示全部楼层
帖子代码
- <style>
- #mydiv {
- margin: -80px 0 0 calc(50% - 593px);
- width: 1024px;
- height: 640px;
- background: url('https://638183.freep.cn/638183/t23/webp1/ad1.webp') center/cover no-repeat;
- overflow: hidden;
- pointer-events: none;
- position: relative;
- --state: paused;
- }
- #mydiv::before, #mydiv::after {
- position: absolute;
- content: '';
- width: 200px;
- height: 200px;
- background: url('https://638183.freep.cn/638183/t22/webp/star.webp') center/cover no-repeat;
- pointer-events: auto;
- cursor: pointer;
- animation: rot 6s infinite linear var(--state);
- }
- #mydiv::after {
- left: 580px;
- top: 120px;
- }
- .ball {
- --delay: 0s;
- position: absolute;
- width: 16px;
- height: 10px;
- border-radius: 50%;
- background: red;
- opacity: .7;
- offset-path: path('M-10 650 Q605 -50,1024 640');
- offset-distance: 0%;
- animation: shot 4s var(--delay) infinite linear var(--state);
- }
- @keyframes shot { to { offset-distance: 100%; } }
- @keyframes rot { to { transform: rotate(360deg); } }
- </style>
- <div id="mydiv">
- <span class="ball"></span>
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1413967568" autoplay="autoplay" loop="loop"></audio>
- <script>
- Array.from({length: 50}).forEach( (item,key) => {
- let sp = document.createElement('span');
- sp.className = 'ball';
- sp.style.cssText += `
- background: #${Math.random().toString(16).substr(-6)};
- box-shadow: 30px 40px 0 #${Math.random().toString(16).substr(-6)}, 15px 20px 0 #${Math.random().toString(16).substr(-6)}, -30px -40px 0 #${Math.random().toString(16).substr(-6)}, -15px -20px 0 #${Math.random().toString(16).substr(-6)};
- --delay: ${key * Math.random() + .4}s;
- `;
- mydiv.appendChild(sp);
- });
- let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|