Image: Outer Circle static with inner circle spin with gradient effect
.outer-circle{
width:330px;
height:330px;
border:35px solid #001b33;
position:absolute;
top:0; bottom:0; left:0;right:0;
margin:auto;
border-radius:50%;
}
.spinner {
animation: rotate 4s linear infinite;
background: cyan;
border-radius: 50%;
height: 280px;
width: 280px;
position: relative;
}
.spinner:before,
.spinner:after {
content: '';
position: absolute;
}
.spinner:before {
border-radius: 50%;
background:
linear-gradient(0deg, hsla(0, 0%, 100%, 1) 50%, hsla(0, 0%, 100%, 0.9) 100%) 0% 0%,
linear-gradient(90deg, hsla(0, 0%, 100%, 0.9) 0%, hsla(0, 0%, 100%, 0.6) 100%) 100% 0%,
linear-gradient(180deg, hsla(0, 0%, 100%, 0.6) 0%, hsla(0, 0%, 100%, 0.3) 100%) 100% 100%,
linear-gradient(360deg, hsla(0, 0%, 100%, 0.3) 0%, hsla(0, 0%, 100%, 0 ) 100%) 0% 100%
;
background-repeat: no-repeat;
background-size: 50% 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}
.spinner:after {
background: white;
border-radius: 50%;
top: 3%;
bottom: 3%;
left: 3%;
right: 3%;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<div class="outer-circle">
<div class="spinner"></div>
</div>
我需要上传图片中显示的输出。这里有两个问题: 1)旋转圆不沿外圆边缘旋转。我需要将它精确地旋转到外圆的实心边框的中心,如图所示。旋转器的边框宽度也必须多一点。我怎样才能实现它?
2)线性渐变效果颜色代码不正确。我需要与图像中相同的颜色组合。我怎样才能用背景实现它:线性渐变语法?