死寂
<style>#papa {
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: darkblue url('https://638183.freep.cn/638183/t23/1/siji.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#mplayer {
--state: paused;
--angle: 360deg;
position: absolute;
left: 62%;
top: 16%;
width: fit-content;
height: fit-content;
padding: 4px;
border: 4px dotted pink;
border-radius: 50%;
cursor: pointer;
animation: rot infinite 10s linear var(--state);
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
top: -10px; left: -10px; bottom: -10px; right: -10px;
border: 4px dotted purple;
border-radius: 50%;
animation: rot infinite 5s linear;
animation-play-state: var(--state);
--angle: -360deg;
}
#mplayer::after {
top: -16px; left: -16px; bottom:-16px; right: -16px;
border-color: darkred;
animation-duration: 12s;
--angle: 360deg;
}
#mplayer > img { width: 160px; height: 160px; border-radius: 50%; }
@keyframes rot {
from { transform: rotate(0); }
to { transform: rotate(var(--angle)); }
}
</style>
<div id="papa">
<div id="mplayer"><img src="https://638183.freep.cn/638183/t23/webp/siji.webp" alt="" /></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1393676639.mp3" loop autoplay></audio>
</div>
<script>
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>
代码很少
<style>
#papa {
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: darkblue url('https://638183.freep.cn/638183/t23/1/siji.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#mplayer {
--state: paused;
--angle: 360deg;
position: absolute;
left: 62%;
top: 16%;
width: fit-content;
height: fit-content;
padding: 4px;
border: 4px dotted pink;
border-radius: 50%;
cursor: pointer;
animation: rot infinite 10s linear var(--state);
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
top: -10px; left: -10px; bottom: -10px; right: -10px;
border: 4px dotted purple;
border-radius: 50%;
animation: rot infinite 5s linear;
animation-play-state: var(--state);
--angle: -360deg;
}
#mplayer::after {
top: -16px; left: -16px; bottom:-16px; right: -16px;
border-color: darkred;
animation-duration: 12s;
--angle: 360deg;
}
#mplayer > img { width: 160px; height: 160px; border-radius: 50%; }
@keyframes rot {
from { transform: rotate(0); }
to { transform: rotate(var(--angle)); }
}
</style>
<div id="papa">
<div id="mplayer"><img src="https://638183.freep.cn/638183/t23/webp/siji.webp" alt="" /></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1393676639.mp3" loop autoplay></audio>
</div>
<script>
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>
音乐开场的点吓人啊 旁边的蓝色的大家伙是什么？是要对美女不利么。黑黑赶快英雄救美{:4_173:} 这个JS里的代码真的少了很多，三个圈圈也成了不同的颜色，漂亮{:4_187:} 红影 发表于 2023-2-16 22:15
这个JS里的代码真的少了很多，三个圈圈也成了不同的颜色，漂亮
就是音乐有点恐怖哦 绿叶清舟 发表于 2023-2-16 22:05
音乐开场的点吓人啊
是恐怖音乐系列 红影 发表于 2023-2-16 22:12
旁边的蓝色的大家伙是什么？是要对美女不利么。黑黑赶快英雄救美
没有气球，上不去 太空➕美人➕恐怖音乐
老师这次走的是非主流风格 热闹的很，哪里死机了 给我耳目一新的感觉，学习了！
醉美水芙蓉 发表于 2023-2-17 07:09
只看到小图播放器一位美女！
{:4_181:} 雨中悄然 发表于 2023-2-16 23:58
太空➕美人➕恐怖音乐
老师这次走的是非主流风格
{:4_172:} 雨中悄然 发表于 2023-2-17 00:03
热闹的很，哪里死机了
{:4_203:} 庶民 发表于 2023-2-17 05:15
给我耳目一新的感觉，学习了！
{:4_190:} 醉美水芙蓉 发表于 2023-2-17 07:08
没有看懂图片里是什么东西？
太空里的飞行器 这个音乐是有点儿恐怖！