如何在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;
}<div class="enjoy-css">
<span></span>
</div>就是这个：
body {
background: #aaa;
background: url(http://www.lorempixel.com/600/600/abstract); /* background to show transparency */
}
.circle {
max-width: 20em; /* Set the max diameter */
margin: 0 auto;
}
.circle span {
position: relative;
display: block;
padding-bottom: 100%;
}
.circle span::after {
content: "";
display: block;
position: absolute;
width: 100%;
top: 0;
bottom: 0;
border-radius: 50%;
background-image: linear-gradient(
black 10%,
transparent 10%,
transparent 18%,
black 18%,
black 28%,
transparent 28%,
transparent 36%,
black 36%,
black 45%,
transparent 45%,
transparent 55%,
black 55%,
black 64%,
transparent 64%,
transparent 72%,
black 72%,
black 82%,
transparent 82%,
transparent 90%,
black 90%
),
linear-gradient(to right, transparent 60%, black 60%),
linear-gradient(to right, transparent 70%, black 70%),
linear-gradient(
to right,
black 15%,
transparent 15%,
transparent 85%,
black 85%
),
linear-gradient(to left, transparent 60%, black 60%),
linear-gradient(to left, transparent 70%, black 70%);
background-size: 100%, 100% 20%, 100% 40%, 100% 20%, 100% 20%, 100% 20%;
background-position: top, top, top, 40%, 0 70%, 0 90%;
background-repeat: no-repeat;
}<!DOCTYPE html>
<html>
<body>
<div class="circle">
<span></span>
</div>
</body>
</html>