马黑黑 发表于 2024-6-23 08:17

h5播放器按钮：clip-path+mask+多彩边框

<style>
.player { position: relative; width: 45px; height: 45px; border-radius: 50%; border: thick groove; border-color: cyan orange yellow green; display: grid; place-items: center; --opt: 1; }
.player::before, .player::after { position: absolute; content: ''; width: 20px; height: 20px; transition: .3s; cursor: pointer; }
.player::before { background: cyan; clip-path: polygon(0 0, 0 100%, 100% 50%); opacity: calc(var(--opt) * 1);}
.player::after { background: orange; mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); -webkit-mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); opacity: calc(1 - var(--opt)); }
.player:hover { --opt: 0; }
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>

<h2>效果</h2>
<div class="player"></div>
<h2>代码</h2>
<div class='mum'>
<cl-cd data-idx="1">&lt;<span class="tDarkRed">style</span>&gt;</cl-cd>
<div class="tGreen"><cl-cd data-idx="2">/* h5圆形按钮小播 要点——</cl-cd>
<cl-cd data-idx="3">   1. --opt 变量 ：按钮形状切换依据</cl-cd>
<cl-cd data-idx="4">   2. clip-path裁剪三角形</cl-cd>
<cl-cd data-idx="5">   3. mask遮罩出暂停按钮（Chrome 120及以后完美支持）</cl-cd>
<cl-cd data-idx="6">   4. border-color设置主元素色圈</cl-cd>
<cl-cd data-idx="7">*/</cl-cd></div>
<cl-cd data-idx="8">&nbsp;</cl-cd>
<cl-cd data-idx="9"><span class="tGreen">/* 按钮 具体应用时改用绝对定位 */</span></cl-cd>
<cl-cd data-idx="10">.player {</cl-cd>
<cl-cd data-idx="11">&nbsp; &nbsp; <span class="tBlue">position:</span> relative;</cl-cd>
<cl-cd data-idx="12">&nbsp; &nbsp; <span class="tBlue">width:</span> 45px;</cl-cd>
<cl-cd data-idx="13">&nbsp; &nbsp; <span class="tBlue">height:</span> 45px;</cl-cd>
<cl-cd data-idx="14">&nbsp; &nbsp; <span class="tBlue">border-radius:</span> 50%;</cl-cd>
<cl-cd data-idx="15">&nbsp; &nbsp; <span class="tBlue">border:</span> thick groove;</cl-cd>
<cl-cd data-idx="16">&nbsp; &nbsp; <span class="tBlue">border-color:</span> cyan orange yellow green;</cl-cd>
<cl-cd data-idx="17">&nbsp; &nbsp; <span class="tBlue">display:</span> grid;</cl-cd>
<cl-cd data-idx="18">&nbsp; &nbsp; <span class="tBlue">place-items:</span> center;</cl-cd>
<cl-cd data-idx="19">&nbsp; &nbsp; <span class="tBlue">--opt:</span> 1;</cl-cd>
<cl-cd data-idx="20">}</cl-cd>
<cl-cd data-idx="21">&nbsp;</cl-cd>
<cl-cd data-idx="22"><span class="tGreen">/* 按钮伪元素统一属性 */</span></cl-cd>
<cl-cd data-idx="23">.player::before, .player::after {</cl-cd>
<cl-cd data-idx="24">&nbsp; &nbsp; <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="25">&nbsp; &nbsp; <span class="tBlue">content:</span> <span class="tMagenta">''</span>;</cl-cd>
<cl-cd data-idx="26">&nbsp; &nbsp; <span class="tBlue">width:</span> 20px;</cl-cd>
<cl-cd data-idx="27">&nbsp; &nbsp; <span class="tBlue">height:</span> 20px;</cl-cd>
<cl-cd data-idx="28">&nbsp; &nbsp; <span class="tBlue">transition:</span> .3s;</cl-cd>
<cl-cd data-idx="29">&nbsp; &nbsp; <span class="tBlue">cursor:</span> pointer;</cl-cd>
<cl-cd data-idx="30">}</cl-cd>
<cl-cd data-idx="31">&nbsp;</cl-cd>
<cl-cd data-idx="32"><span class="tGreen">/* 播放按钮 用clip-path切出三角形图标 */</span></cl-cd>
<cl-cd data-idx="33">.player::before {</cl-cd>
<cl-cd data-idx="34">&nbsp; &nbsp; <span class="tBlue">background:</span> cyan;</cl-cd>
<cl-cd data-idx="35">&nbsp; &nbsp; <span class="tBlue">clip-path:</span> polygon(0 0, 0 100%, 100% 50%);</cl-cd>
<cl-cd data-idx="36">&nbsp; &nbsp; <span class="tBlue">opacity:</span> calc(<span class="tBlue">var</span>(--opt) * 1); <span class="tGreen">/* 透明变量 */</span></cl-cd>
<cl-cd data-idx="37">}</cl-cd>
<cl-cd data-idx="38">&nbsp;</cl-cd>
<cl-cd data-idx="39"><span class="tGreen">/* 暂停按钮 用mask遮罩弄出两个柱状图标 */</span></cl-cd>
<cl-cd data-idx="40">.player::after {</cl-cd>
<cl-cd data-idx="41">&nbsp; &nbsp; <span class="tBlue">background:</span> orange;</cl-cd>
<cl-cd data-idx="42">&nbsp; &nbsp; <span class="tBlue">mask:</span> linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0);</cl-cd>
<cl-cd data-idx="43">&nbsp; &nbsp; <span class="tBlue">-webkit-mask:</span> linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0);</cl-cd>
<cl-cd data-idx="44">&nbsp; &nbsp; <span class="tBlue">opacity:</span> calc(1 - <span class="tBlue">var</span>(--opt));</cl-cd>
<cl-cd data-idx="45">}</cl-cd>
<cl-cd data-idx="46">&nbsp;</cl-cd>
<cl-cd data-idx="47"><span class="tGreen">/* 设备指针滑过 切换播放/暂停图标（仅演示） */</span></cl-cd>
<cl-cd data-idx="48">.<span class="tBlue">player:</span>hover {</cl-cd>
<cl-cd data-idx="49">&nbsp; &nbsp; <span class="tBlue">--opt:</span> 0;</cl-cd>
<cl-cd data-idx="50">}</cl-cd>
<cl-cd data-idx="51">&nbsp;</cl-cd>
<cl-cd data-idx="52">&lt;<span class="tDarkRed">/style</span>&gt;</cl-cd>
<cl-cd data-idx="53">&nbsp;</cl-cd>
<cl-cd data-idx="54">&lt;<span class="tDarkRed">div</span> class=<span class="tMagenta">"player"</span>&gt;&lt;<span class="tDarkRed">/div</span>&gt;</cl-cd>
</div>

梦江南 发表于 2024-6-23 08:48

谢谢老师无私奉献，辛苦了！

马黑黑 发表于 2024-6-23 08:54

梦江南 发表于 2024-6-23 08:48
谢谢老师无私奉献，辛苦了！

{:4_190:}

马黑黑 发表于 2024-6-23 08:55

代码 43 行：兼容低于 120 的 Chrome浏览器

红影 发表于 2024-6-23 09:20

用一个--opt九能保证来回切换，这思路巧妙{:4_199:}

红影 发表于 2024-6-23 09:22

漂亮的多彩小播{:4_199:}

南无月 发表于 2024-6-23 09:42

--opt 变量 ：按钮形状切换依据
--opt: 1;--opt: 0;

这是个新的知识点，从来没见过这东东。。神奇得很。

南无月 发表于 2024-6-23 09:44

之前用两个小图片区分暂停和播放的，
现在直接裁剪，
按照规则 对应 隐去或者显示，
这技术真是太高大上了。

无借助任何图片功能超级完整的纯代码小播。。{:4_199:}

南无月 发表于 2024-6-23 09:47

opacity: calc(var(--opt) * 1);
透明变量不是固定的，还可以通过计算完成

看着是小小播，有大能耐大本事的人才想得出来，整得出来
一个字：强悍{:4_170:}

南无月 发表于 2024-6-23 09:52

马黑黑 发表于 2024-6-23 08:55
代码 43 行：兼容低于 120 的 Chrome浏览器

{:4_173:}记起来了，老师曾说过，42跟43虽一样，但要同时存在

马黑黑 发表于 2024-6-23 10:03

南无月 发表于 2024-6-23 09:52
记起来了，老师曾说过，42跟43虽一样，但要同时存在

这个 mask 现在已经成为标准了，但是Chromium 120才开始真正支持，之前的没有 -webkit- 前缀的话是无效的

马黑黑 发表于 2024-6-23 10:04

南无月 发表于 2024-6-23 09:47
opacity: calc(var(--opt) * 1);
透明变量不是固定的，还可以通过计算完成



CSS可以做的计算不太多，用上逻辑判断的计算需要自己设计

马黑黑 发表于 2024-6-23 10:04

南无月 发表于 2024-6-23 09:44
之前用两个小图片区分暂停和播放的，
现在直接裁剪，
按照规则 对应 隐去或者显示，


改一改颜色，适用性还是可以的

马黑黑 发表于 2024-6-23 10:04

红影 发表于 2024-6-23 09:22
漂亮的多彩小播

{:4_190:}

马黑黑 发表于 2024-6-23 10:06

红影 发表于 2024-6-23 09:20
用一个--opt九能保证来回切换，这思路巧妙

这是逻辑计算，需要自行设计。其实也仅需一点点小心思就可以做出来

醉美水芙蓉 发表于 2024-6-23 10:57

马黑黑 发表于 2024-6-23 10:58

醉美水芙蓉 发表于 2024-6-23 10:57
欣赏老师制作的新播放器！

{:4_190:}

南无月 发表于 2024-6-23 12:19

马黑黑 发表于 2024-6-23 10:03
这个 mask 现在已经成为标准了，但是Chromium 120才开始真正支持，之前的没有 -webkit- 前缀的话是无效的

好哒，mask这个标准让大家都来看齐。。某些浏览器还是得加油{:4_173:}

南无月 发表于 2024-6-23 12:20

马黑黑 发表于 2024-6-23 10:04
CSS可以做的计算不太多，用上逻辑判断的计算需要自己设计

还是自己设计的比较有个性，更适合当下贴子

南无月 发表于 2024-6-23 12:23

马黑黑 发表于 2024-6-23 10:04
改一改颜色，适用性还是可以的

之前图片为了适应贴子的色彩，是用PS改色，再上传的。
现在可方便了，直接改就可以。。找到适合自己贴子的色彩。。
从操作和效果都是飞跃{:4_199:}
大爱
页: [1] 2 3 4
查看完整版本: h5播放器按钮：clip-path+mask+多彩边框