很浅的html边框,css – 边框淡入圆圈

您可以将渐变应用于伪元素,如下所示：

#loader-wrapper {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1000;

}

#loader {

display: block;

position: relative;

left: 50%;

top: 50%;

width: 150px;

height: 150px;

margin: -75px 0 0 -75px;

border-radius: 50%;

border: 5px solid transparent;

border-top-color: #aaa;

border-right-color: #aaa;

animation: spin 2s linear infinite;

}

#loader::after {

content: '';

width: 85%;

height: 85%;

background: linear-gradient(45deg,rgba(255,255,1) 0%,1) 40%,0.7) 60%,0) 100%);

position: absolute;

top: 0;

left: 0;

transform: translate(-5%,-5%);

}

@keyframes spin {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}