Question

图片：Circular spinner rotating along the border rim of other solid circle

请访问：https://codepen.io/sadashivjp/pen/oqqzwg 我在这里创建了一个UI codepen。您可以自由地对此进行任何更改，并在此处发布解决方案。

相同的代码如下：

＆＃13;

<div class="outer-circle">
<div class="spinner"></div>
</div>

＆＃13;

%AppData%

＆＃13;

此代码中存在两个问题： 1）在IE11浏览器中引起旋转圆圈的摆动（抖动）效果。但是，在Google Chrome浏览器中完美运行。 2）如附图所示，需要在内部白色旋转器圆的前缘的前缘处具有半月形（圆柱形底部形状）的类似效果。

如何解决这两个问题？修改我现有的代码或使用SVG或Canvas在任何其他代码上提供解决方案都没问题。

Answer 1

在微调器内添加一个div。

.outer-circle{
  width:330px;
  height:330px;
  border:30px solid #001b33;
  position:absolute;
  top:0; bottom:0; left:0;right:0;
  margin:auto;
  border-radius:50%; 
}

.spinner {
	animation: rotate 5s linear infinite;
	border-radius: 50%;
	height: 360px;
	width: 360px;
	position: relative;
  left: -15px;
  top: -15px;
}

.spinner:before,
.spinner:after {
	content: '';
	position: absolute;
}

.spinner:before {
	border-radius: 50%;
	background:
		linear-gradient(0deg,   hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%)   0%   0%,
		linear-gradient(90deg,  hsla(0, 0%, 100%, 0.1)  0%, hsla(0, 0%, 100%, 0.5) 100%) 100%   0%,
		linear-gradient(180deg, hsla(0, 0%, 100%, 0.5)  0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%,
		linear-gradient(360deg, hsla(0, 0%, 100%, 0.60)  0%, hsla(0, 0%, 100%, 0.70 ) 100%)   0% 100%
	;
	background-repeat: no-repeat;
	background-size: 50% 50%;
	top: -1px;
	bottom: -1px;
	left: -1px;
	right: -1px;
}

.spinner:after {
	background: black;
        border: 15px solid #001b33;
	border-radius: 50%;
	top: 3%;
	bottom: 3%;
	left: 3%;
	right: 3%;
}

@keyframes rotate {
	from { transform: rotate(0deg);   }
	to   { transform: rotate(360deg); }
}
.circle{
        background: #b1bac1;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 177px;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50% 50%;

}

<div class="outer-circle">
  <div class="spinner">
      <div class="circle">
      </div>
  </div>
</div>

Answer 2

＆＃13;

.outer-circle{
  width:330px;
  height:330px;
  border:30px solid #001b33;
  position:absolute;
  top:0; bottom:0; left:0;right:0;
  margin:auto;
  border-radius:50%; 
}

.spinner {
	animation: rotate 5s linear infinite;
	border-radius: 50%;
	height: 360px;
	width: 360px;
	position: relative;
  left: -15px;
  top: -15px;
}

.spinner:before,.spinner:after,
.outer-circle:after {
	content: '';
	position: absolute;
}

.spinner:before {
	border-radius: 50%;
	background:
		linear-gradient(0deg,   hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%)   0%   0%,
		linear-gradient(90deg,  hsla(0, 0%, 100%, 0.1)  0%, hsla(0, 0%, 100%, 0.5) 100%) 100%   0%,
		linear-gradient(180deg, hsla(0, 0%, 100%, 0.5)  0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%,
		linear-gradient(360deg, hsla(0, 0%, 100%, 0.60)  0%, hsla(0, 0%, 100%, 0.70 ) 100%)   0% 100%
	;
	background-repeat: no-repeat;
	background-size: 50% 50%;
	top: -1px;
	bottom: -1px;
	left: -1px;
	right: -1px;
}

.spinner:after{
    background: #afb7bf;
    height: 15px; width:15px;
    border-radius: 50%;
    top: 175px;
    left: -1px;
    right: -100px;
    bottom: 0px;
}

.outer-circle:after {
	background: black;
        border: 15px solid #001b33;
	border-radius: 50%;
	top: -1px;
	bottom: -1px;
	left: -1px;
	right: -1px;
}

@keyframes rotate {
	from { transform: rotate(0deg);   }
	to   { transform: rotate(360deg); }
}

＆＃13;

<div class="outer-circle">
<div class="spinner"></div>
</div>

＆＃13;

我希望这是您正在寻找的解决方案！

如何制作CSS圆形微调半月形的前沿

2 个答案: