星星背后

马黑黑 · 发表于 2023-4-10 08:07

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

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

x

本帖最后由马黑黑于 2023-4-10 08:11 编辑

马黑黑 · 发表于 2023-4-10 08:13

本帖最后由马黑黑于 2023-4-10 12:41 编辑

另外两种样式：

① 星星的背后 (freeee.ml)

② 星星背后 (52qingyin.cn)

马黑黑 · 发表于 2023-4-10 08:14

代码

<style>
#papa {
margin: 30px auto;
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t23/webp1/xxbh.webp') center/cover no-repeat;
position: relative;
}
#papa::before, #papa::after {
position: absolute;
content: url('https://638183.freep.cn/638183/t22/gif/0b01.gif');
mix-blend-mode: screen;
}
#papa::after { left: 180px; }
#wrap {
position: absolute;
left: 240px;
top: 20px;
width: 200px;
height: 200px;
display: grid;
place-items: center;
cursor: pointer;
z-index: 10;
animation: hue 10s infinite alternate var(--state);
}
#wrap > span {
position: absolute;
width: 0;
height: 0;
border-radius: 50%;
border: 8px dotted hsla(60,50%,50%,.65);
transform: rotate(var(--deg));
animation: rot var(--time) infinite linear var(--state);
}
@keyframes rot {
from { transform: rotate(var(--deg)); }
to { transform: rotate(calc(var(--deg) + 360deg)); }
}
@keyframes hue {
to { filter: hue-rotate(360deg); }
}
</style>
<div id="papa">
<div id="wrap" title="播放/暂停"><span></span></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=33510629" loop="loop" autoplay="autoplay"></audio>
</div>
<script>
Array.from({length:10}).forEach((item,key) => {
let sp = document.createElement('span');
sp.style.cssText += `
--deg: ${Math.random()*(key+10)}deg;
--time: ${Math.random()*10+10}s;
width: ${key*18}px;
height: ${key*18}px;
border-color: #${Math.random().toString(16).substr(-6)};
border-width: ${2*key}px;
`;
wrap.appendChild(sp);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
wrap.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>