夜晚
本帖最后由 绿叶清舟 于 2023-3-18 10:12 编辑 <br /><br /><style>#papa { margin: -80px 0 0 calc(50% - 633px); width: 1100px; height: 700px; background: tan url('https://pic.imgdb.cn/item/6414301da682492fcc7f473c.jpg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; z-index: 1; }
#mplayer{ position: absolute;right: 530px; top: 68px; width: 60px; height: 60px; border-radius: 80%; background: transparent; box-shadow: 10px 15px 0 #afb2bc; cursor: wait;}
#mplayer::before {
position: absolute;
content: '';
width: 70px;
height: 75px;
/*border: 1px solid tan;*/
}
</style>
<div id="papa">
<div id="mplayer"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5239696.mp3" autoplay loop></audio>
</div>
<script>
let mState = () => {
aud.paused ? papa.style.setProperty('--state', 'paused') : papa.style.setProperty('--state', 'running');
};
mplayer.addEventListener('click', () => {
aud.paused ? aud.play() : aud.pause();
});
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script> 没有交互？ 马黑黑 发表于 2023-3-17 19:32
没有交互？
能找到不 马黑黑 发表于 2023-3-17 19:32
没有交互？
有啊 欣赏佳作，问候清舟。 梦油 发表于 2023-3-17 20:11
欣赏佳作，问候清舟。
梦油晚上好啊 那个月牙被制作成文字的一部分，这制作真奇特{:4_187:} 绿叶清舟 发表于 2023-3-17 20:02
有啊
我也没找到哪里能交互{:4_173:} 红影 发表于 2023-3-17 20:21
我也没找到哪里能交互
就是那个月牙啊 无尘 发表于 2023-3-17 20:00
能找到不
找不到 绿叶清舟 发表于 2023-3-17 20:22
就是那个月牙啊
不好使 马黑黑 发表于 2023-3-17 20:26
不好使
月牙上面有，移到月牙身上没有了啥原因呢 绿叶清舟 发表于 2023-3-17 20:22
就是那个月牙啊
点上没有手型，也不会暂停啊。 点在月牙上能暂停 开始！ 绿叶清舟 发表于 2023-3-17 20:30
月牙上面有，移到月牙身上没有了啥原因呢
月牙是阴影做的，阴影不是元素。所以，我们会做一个伪元素，透明的，覆盖阴影。伪元素会跟随主元素接受点击。 本帖所使用的音频控制器，CSS代码如下：
#mplayer {
position: absolute;
content: '';
right: 530px;
top: 68px;
width: 60px;
height: 60px;
border-radius: 80%;
background: transparent;
box-shadow: 10px 15px 0 #afb2bc;
cursor: wait;
}
暗红色部分，其一，content: '';，这一句用于伪元素设定，应删掉；其二，cursor: wait;，设定鼠标指针形状用了等待，不合理，应是手型 pointer ，手型会告诉用户这里可以点击，等待则告诉用户你要等待。
此外，由于主元素并未显示出来（背景色为透明 transparent），我们需要阴影能够接受点击，而阴影是没有这个功能的，所以，我们需要借助主元素的伪元素来囊括阴影所在的位置，因为伪元素会跟随主元素接受点击交互：
#mplayer::before {
position: absolute;
content: '';
width: 70px;
height: 75px;
/*border: 1px solid tan;*/
}
边框不是必须的，所以注释掉了，把注释去掉，会看到它刚好包含了阴影在它的范围里面。这是为什么？伪元素设置为绝对定位，那么，在有定位设置的主元素里，它的 top 和 left 会默认都是0，则，它的宽度比主元素多了10个像素、高度多了15个像素，所多出的部分恰好是主元素阴影的右偏移量和下偏移量，所以伪元素的范围包含了阴影。
@绿叶清舟 @红影 @小辣椒 @雨中悄然
绿叶清舟 发表于 2023-3-17 20:22
就是那个月牙啊
清舟这个问题我碰到过，上次做月亮播放器的时候就是移动位置后小手不出来了 马黑黑 发表于 2023-3-17 20:26
不好使
黑黑，就是上次我做月亮播放器移动位置后，小手不能出来再重新移动了一点点，点击不能整个月亮位置，我发帖说了，有瑕疵，后来发现倒影也是一样的问题，最后没有弄好 马黑黑 发表于 2023-3-17 22:00
本帖所使用的音频控制器，CSS代码如下：
#mplayer {
学习了{:4_187:} 马黑黑 发表于 2023-3-17 22:00
本帖所使用的音频控制器，CSS代码如下：
#mplayer {
这个学习了，谢谢黑黑{:4_187:}