曙光

马黑黑 · 发表于 2023-4-16 12:02

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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>