如何使旋转器的最后部分变亮（即褪色）：
<div id="loader-wrapper">
<div id="loader"></div>
</div>gradient
我尝试使用mongod.service - High-performance, schema-free document-oriented database
Loaded: loaded (/lib/systemd/system/mongod.service; disabled)
Active: failed (Result: exit-code) since Tue 2016-12-27 15:14:43 CST; 56s ago
Process: 29940 ExecStart=/usr/bin/mongod $OPTIONS run (code=exited, status=14)
Process: 29928 ExecStartPre=/usr/bin/percona-server-mongodb-helper.sh (code=exited, status=0/SUCCESS)
Main PID: 29940 (code=exited, status=14)
Dec 27 15:14:43 debian systemd[1]: Started High-performance, schema-free document-oriented database.
Dec 27 15:14:43 debian mongod[29940]: 2016-12-27T15:14:43.177-0600 I STORAGE Compression: snappy
Dec 27 15:14:43 debian mongod[29940]: 2016-12-27T15:14:43.177-0600 I STORAGE MaxWriteMBPerSec: 1024
Dec 27 15:14:43 debian mongod[29940]: 2016-12-27T15:14:43.177-0600 I STORAGE Crash safe counters: 0
Dec 27 15:14:43 debian systemd[1]: mongod.service: main process exited, code=exited, status=14/n/a
Dec 27 15:14:43 debian systemd[1]: Unit mongod.service entered failed state.
，但将转换为正方形
答案 0 :(得分：9)
您可以将渐变应用于伪元素，如下所示：
#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>
答案 1 :(得分：0)
这是另一个代码更少且不使用伪元素的想法。
.loader {
--border-width: 5px;
height: 150px;
width: 150px;
border-radius: 50%;
/* 0.5px's are needed to avoid hard-stopping */
--mask: radial-gradient(
farthest-side,
transparent calc(100% - var(--border-width) - 0.5px),
#000 calc(100% - var(--border-width) + 0.5px)
);
-webkit-mask: var(--mask);
mask: var(--mask);
background: linear-gradient(#aaa 30%, transparent 80%) 0 0/50% 100% no-repeat; /* this is our border image */
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<div class="loader"></div>这是通过将背景设置为正文将我的答案与@Ricky 的答案进行的比较：
@Ricky 的方式：
body {
background: pink; /* just added this */
}
#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>我的方式：
body {
background: pink; /* just added this */
}
.loader {
--border-width: 5px;
height: 150px;
width: 150px;
border-radius: 50%;
/* 0.5px's are needed to avoid hard-stopping */
--mask: radial-gradient(
farthest-side,
transparent calc(100% - var(--border-width) - 0.5px),
#000 calc(100% - var(--border-width) + 0.5px)
);
-webkit-mask: var(--mask);
mask: var(--mask);
background: linear-gradient(#aaa 30%, transparent 80%) 0 0/50% 100% no-repeat; /* this is our border image */
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<div class="loader"></div>