召唤

马黑黑 · 发表于 2023-3-8 07:32

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

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

x

马黑黑 · 发表于 2023-3-8 07:33

帖子代码

<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>

复制代码

马黑黑 · 发表于 2023-3-8 07:56

#mplayer id选择器使用了外边框属性 outline，该属性与边框属性 border 的设置很相似，可以比较一下二者赋值，同时，outline 拥有偏移设置属性，outline-offset，可通过该属性将外边框与内边框拉开距离。

外边框不挤占dom空间，虽然它看上去像是占有空间的。outline不论设计多大，都不能改变它与周边元素的实际距离。