小编mat*_*773的帖子

如何在CSS中制作一个内部带有透明水平线的响应圆圈?

我不知道这是否只有css才有可能.我想制作一个透明水平线的圆圈,你可以改变每条线的大小和位置.像这样的png图片:

在此输入图像描述

到目前为止我做到了这一点,但它没有响应它内部没有透明线,但你可以自由移动所有线.

.enjoy-css {
  box-sizing: content-box;
  width: 300px;
  height: 300px;
  position: absolute;
  border: none;
  border-radius: 150px;
  background: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white)black;
  background-repeat: no-repeat;
  background-position: 90% 90%, 55% 75%, 90% 10%, 95% 30%, 90%;
  background-origin: padding-box;
  background-size: 124px 20px, 153px 20px, 124px 20px, 153px 20px, 80px 20px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="enjoy-css">
  <span></span>
</div>
Run Code Online (Sandbox Code Playgroud)

css css3

5
推荐指数
1
解决办法
137
查看次数

标签 统计

css ×1

css3 ×1