召唤
<style>#papa {
--state: paused;
margin: -80px 0 0 calc(50% - 681px);
width: 1200px;
height: 675px;
background: #7E949B url('https://638183.freep.cn/638183/t23/1/space.jpg') no-repeat;
box-shadow: 3px 3px 20px #000;
place-items: center;
z-index: 1;
position: relative;
}
#mplayer {
position: absolute;
top: 330px;
right: 126px;
width: 60px;
height: 60px;
border: 2px solid lightblue;
border-radius: 50%;
outline: 2px solid lightblue;
outline-offset: 2px;
animation: sd .15s infinite alternate var(--state);
cursor: pointer;
transition: 1s;
}
#mplayer:hover { transform: scale(1.1); }
@keyframes sd {
from { box-shadow: 0 0 30px hsla(0,100%,50%,.45), 0 0 40px hsla(240,100%,50%,.25) inset; }
to { box-shadow: 0 0 60px hsla(120,80%,40%,.35), 0 0 80px hsla(120,100%,50%,.25) inset;}
}
</style>
<div id="papa">
<div id="mplayer"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1821539380.mp3" autoplay loop></audio>
</div>
<script>
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script> 帖子代码
<style>
#papa {
--state: paused;
margin: -80px 0 0 calc(50% - 681px);
width: 1200px;
height: 675px;
background: #7E949B url('https://638183.freep.cn/638183/t23/1/space.jpg') no-repeat;
box-shadow: 3px 3px 20px #000;
place-items: center;
z-index: 1;
position: relative;
}
#mplayer {
position: absolute;
top: 330px;
right: 126px;
width: 60px;
height: 60px;
border: 2px solid lightblue;
border-radius: 50%;
outline: 2px solid lightblue;
outline-offset: 2px;
animation: sd .15s infinite alternate var(--state);
cursor: pointer;
transition: 1s;
}
#mplayer:hover { transform: scale(1.1); }
@keyframes sd {
from { box-shadow: 0 0 30px hsla(0,100%,50%,.45), 0 0 40px hsla(240,100%,50%,.25) inset; }
to { box-shadow: 0 0 60px hsla(120,80%,40%,.35), 0 0 80px hsla(120,100%,50%,.25) inset;}
}
</style>
<div id="papa">
<div id="mplayer"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1821539380.mp3" autoplay loop></audio>
</div>
<script>
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>
#mplayer id选择器使用了外边框属性 outline，该属性与边框属性 border 的设置很相似，可以比较一下二者赋值，同时，outline 拥有偏移设置属性，outline-offset，可通过该属性将外边框与内边框拉开距离。
外边框不挤占dom空间，虽然它看上去像是占有空间的。outline不论设计多大，都不能改变它与周边元素的实际距离。 太神秘了，感到有一种力量在招呼。 赞老师佳作！{:4_204:} 庶民 发表于 2023-3-8 08:54
太神秘了，感到有一种力量在招呼。
{:4_181:} 焱鑫磊 发表于 2023-3-8 09:51
赞老师佳作！
感谢支持。节日好！ 召唤出了神龙 超级漂亮，32赞 有钱贴 再回一个 花飞飞 发表于 2023-3-8 12:28
召唤出了神龙
不是神马吗{:4_170:} 晚上来细看，这个播放器小圆会伸缩？ 这个图图潜水员好帅气{:4_189:} outline 拥有偏移设置属性 好帖
outline css2
outline-offset css3
漂亮，音乐很有种宇宙神秘电波的感觉{:4_173:} 这次播放器的闪光看到了{:4_187:} 红影 发表于 2023-3-8 15:34
这次播放器的闪光看到了
这个不是滤镜。滤镜你看不到，说明浏览器的内核偏低，而且可能很低 红影 发表于 2023-3-8 15:33
漂亮，音乐很有种宇宙神秘电波的感觉
好像有的