2024年6月23日 星期日
h5播放器按钮：clip-path+mask+多彩边框
效果
代码
<style>
/* h5圆形按钮小播 要点——
1. --opt 变量 ：按钮形状切换依据
2. clip-path裁剪三角形
3. mask遮罩出暂停按钮（Chrome 120及以后完美支持）
4. border-color设置主元素色圈
*/
/* 按钮 具体应用时改用绝对定位 */
.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;
}
/* 播放按钮 用clip-path切出三角形图标 */
.player::before {
background: cyan;
clip-path: polygon(0 0, 0 100%, 100% 50%);
opacity: calc(var(--opt) * 1); /* 透明变量 */
}
/* 暂停按钮 用mask遮罩弄出两个柱状图标 */
.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;
}
</style>
<div class="player"></div>
| 
发表于 2024-6-23 13:08
