边境褪色

Question

我怎么能做出微调的最后部分打火机（即褪色。）：

\t 
 
#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; 
 
} 
 
    
 
@keyframes spin { 
 
    0% { 
 
     transform: rotate(0deg); 
 
    } 
 
    100% { 
 
     transform: rotate(360deg); 
 
    } 
 
}

<div id="loader-wrapper"> 
 
    <div id="loader"></div> 
 
</div>

我尝试使用gradient但其转换正方形

Answer 1

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

#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, 255, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100%); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    transform: translate(-5%, -5%); 
 
} 
 
@keyframes spin { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div id="loader-wrapper"> 
 
    <div id="loader"></div> 
 
</div>