马黑黑 发表于 2023-3-26 19:22

真正的小播？

<style>
#mplayer {
        position: absolute;
        width: 30px;
        height: 30px;
        border: 2px solid var(--bd);
        border-radius: 50%;
        box-shadow: 0 0 10px var(--sd);
        transition: .7s;
        cursor: pointer;
        display: grid;
        place-items: center;
        --play: 1; --pause: 0; --bd: black; --sd: black;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: var(--bd);
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 10px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent var(--bd);
        opacity: var(--play);
}
#mplayer::after {
        width: 2px;
        height: 16px;
        border-width: 0 4px 0 4px;
        opacity: var(--pause);
}
#mplayer:hover { box-shadow: 0 0 10px var(--sd), 0 0 10px var(--sd) inset; }
</style>

<div id="mplayer"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=304943" loop></audio>

<script>
let mState = () => aud.paused ? (mplayer.style.setProperty('--play', '1'), mplayer.style.setProperty('--pause', '0')) : (mplayer.style.setProperty('--play', '0'),mplayer.style.setProperty('--pause', '1'));
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);

</script>

马黑黑 发表于 2023-3-26 19:23

代码
<style>
#mplayer {
        position: absolute;
        width: 30px;
        height: 30px;
        border: 2px solid var(--bd);
        border-radius: 50%;
        box-shadow: 0 0 10px var(--sd);
        transition: .7s;
        cursor: pointer;
        display: grid;
        place-items: center;
        --play: 1; --pause: 0; --bd: black; --sd: black;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: var(--bd);
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 10px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent var(--bd);
        opacity: var(--play);
}
#mplayer::after {
        width: 2px;
        height: 16px;
        border-width: 0 4px 0 4px;
        opacity: var(--pause);
}
#mplayer:hover { box-shadow: 0 0 10px var(--sd), 0 0 10px var(--sd) inset; }
</style>

<div id="mplayer"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=304943" loop></audio>

<script>
let mState = () => aud.paused ? (mplayer.style.setProperty('--play', '1'), mplayer.style.setProperty('--pause', '0')) : (mplayer.style.setProperty('--play', '0'),mplayer.style.setProperty('--pause', '1'));
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);

</script>

雨中悄然 发表于 2023-3-26 19:41

这么小个东东，这么多代码

马黑黑 发表于 2023-3-26 19:50

雨中悄然 发表于 2023-3-26 19:41
这么小个东东，这么多代码

都是CSS代码。CSS使用描述性属性去指定 <div id="mplayer"></div> 的样式，一个HTML单标签，它能如此交互，CSS做了大量的工作，还有多数的动态交互，由JS完成。

红影 发表于 2023-3-26 20:04

这个还挺好看的呢{:4_187:}

红影 发表于 2023-3-26 20:06

opacity: var(--play); 这个做法有点不明白。这个使用透明度来回切换的么？

马黑黑 发表于 2023-3-26 20:45

红影 发表于 2023-3-26 20:06
opacity: var(--play); 这个做法有点不明白。这个使用透明度来回切换的么？

播放按钮是三角形，暂停按钮是两个竖杠（中队长？），它们放在同一个位置，一个时间里只显示其中的一个。所以用不透明度来处理它们：

opacity: var(--play); 中，--paly 变量指播放按钮的不透明度；--pause 变量则是停止按钮的不透明度。

然后，根据音频播放状态，JS 给这些CSS变量进行赋值（mState函数）。

这样，就达成了预期的只显示一个按钮的效果。

马黑黑 发表于 2023-3-26 20:46

红影 发表于 2023-3-26 20:04
这个还挺好看的呢

好看不好看不重要，关键是小而美{:4_170:}

千羽 发表于 2023-3-26 21:06

小而美的播放器，好看{:4_187:}

马黑黑 发表于 2023-3-26 21:11

千羽 发表于 2023-3-26 21:06
小而美的播放器，好看

谢谢

庶民 发表于 2023-3-27 05:51

我看到一个按钮。

马黑黑 发表于 2023-3-27 07:10

庶民 发表于 2023-3-27 05:51
我看到一个按钮。

就是一个按钮

小辣椒 发表于 2023-3-27 13:25

这个小播放器，小巧玲珑{:4_199:}

小辣椒 发表于 2023-3-27 13:27

最早黑黑分享的有个播放器有加滚动条的，和这个好像差不多的

小辣椒 发表于 2023-3-27 13:27

这个小播加了阴影效果

小辣椒 发表于 2023-3-27 13:28

漂亮的，做小帖最合适了

马黑黑 发表于 2023-3-27 17:22

小辣椒 发表于 2023-3-27 13:28
漂亮的，做小帖最合适了

{:4_181:}

小辣椒 发表于 2023-3-27 17:25

马黑黑 发表于 2023-3-27 17:22


大图也是可以做的，简洁，反而漂亮

马黑黑 发表于 2023-3-27 17:25

小辣椒 发表于 2023-3-27 17:25
大图也是可以做的，简洁，反而漂亮

说得好像也有道理

小辣椒 发表于 2023-3-27 17:33

马黑黑 发表于 2023-3-27 17:25
说得好像也有道理

这个应该是人人喜欢的，玩纯音画的也是可以用的
页: [1] 2 3 4 5 6
查看完整版本: 真正的小播？