夜晚

绿叶清舟

马黑黑

没有交互？

无尘

马黑黑 发表于 2023-3-17 19:32
没有交互？

能找到不

绿叶清舟

马黑黑 发表于 2023-3-17 19:32
没有交互？

有啊

梦油

欣赏佳作，问候清舟。

绿叶清舟

梦油 发表于 2023-3-17 20:11
欣赏佳作，问候清舟。

梦油晚上好啊

红影

那个月牙被制作成文字的一部分，这制作真奇特

红影

绿叶清舟 发表于 2023-3-17 20:02
有啊

我也没找到哪里能交互

绿叶清舟

红影 发表于 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 {

学习了

小辣椒

马黑黑 发表于 2023-3-17 22:00
本帖所使用的音频控制器，CSS代码如下：

#mplayer {

这个学习了，谢谢黑黑