挖孔的另一种实现方法

马黑黑 · 发表于 2022-11-23 09:27

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-11-23 09:36 编辑

早些时候，我们介绍过中间挖孔的光盘播放控制器，使用的是 mask 属性。你可以戳这里查看：

中间挖空的光盘播放器 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

mask 属性，MSDN 这么解释：CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。这类解释都很隐晦，我们意译一下：mask属性通过遮罩或剪裁令元素被遮罩或剪裁的区域透明。

作为复习，我们给出上述链接的语句：

-webkit-mask: radial-gradient(transparent 4px,red 0)

上面的设置，要使用前缀 -webkit-，因为 mask 属性还处在实验阶段，尚未转正。mask 和 background 一样，支持图片和渐变，上例，使用的是径向渐变 radial-gradient，渐变在 CSS 里被视为图片。径向渐变设置里，transparent 透明色直径设置为 4px，它就是挖孔的部分，是它让光盘中心部分的4px直径变为了透明；第二个颜色 red 0 表示红色从离中心点 4px 处开始向四周蔓延，也就是紧挨着透明色、向四周延伸的颜色都是红色，但这个红色可以是任意一种透明色以外的颜色，这个颜色不会显示出来，它不论是什么颜色（不能用透明色）其自身都是透明的，因而光盘的先前设置的样式除开中间4x直径的圆圈外都得到保留。

mask 属性比较难以理解，且它还不是正式CSS干部，但它确实很厉害。

不过，如果不需要保留元素（比如光盘）的原先部分设定，只需要一个挖孔的效果，我们直接使用 radial-gradient 这个径向渐变便可，试看：

#prog {
      position: relative;
      width: 300px;
      height: 4px;
      background: #ccc;
      display: grid;
      place-items: center;
      cursor: pointer;
}
#prog::before, #prog::after { position: absolute; content: ''; }
#prog::before {
      height: 4px;
      width: 50%;
      left: 0;
      background: linear-gradient(90deg,green,red,orange);
}
#prog::after {
      left: calc(50% - 12px);
      width: 16px;
      height: 16px;
      background: radial-gradient(transparent 2px, teal 0, black);
      border-radius: 50%;
}

这是一个带模拟滑块的进度条设计，#prog 做底轨，其 ::before 伪元素做进度指示、::after 伪元素做模拟滑块。我们重点看 ::after，它使用 background 属性设置挖孔效果，用的是 radial-gradient 径向渐变，第一个颜色是透明色（transparent），占位 2px，它就是挖孔的部分，第二个颜色 teal 参数是 0，表示从 2px 处和透明色交接以令透明色是一个圆圈而不是颜色过渡，第三个颜色没有参数，它和第二个颜色 teal 过渡交接，营造滑块外观。

效果请看下楼。感谢阅读！

马黑黑 · 发表于 2022-11-23 09:30

马黑黑 · 发表于 2022-11-23 09:31

二楼完整代码：

<style>
#prog {
      position: relative;
      width: 300px;
      height: 4px;
      background: #ccc;
      display: grid;
      place-items: center;
      cursor: pointer;
}
#prog::before, #prog::after { position: absolute; content: ''; }
#prog::before {
      height: 4px;
      width: 50%;
      left: 0;
      background: linear-gradient(90deg,green,red,orange);
}
#prog::after {
      left: calc(50% - 12px);
      width: 16px;
      height: 16px;
      background: radial-gradient(transparent 2px, teal 0, black);
      border-radius: 50%;
}
</style>

<div style="position: relative; width: 100%; height: 360px; display: grid; place-items: center;">
<span id="prog"></span>
</div>