如何创建具有渐变边框和透明度的 CSS 加载器？

Question

我正在尝试用 HTML 和 CSS 做一个加载器我已经完成了加载器，但是当我在加载器中心后面有信息时出现问题，该信息没有显示，原因是因为我有背景：白色； 我需要避免显示渐变，因为如果我删除白色并放置透明渐变就会出现。

所以当我在装载机后面有东西时我需要解决这个问题

 .loader { display: flex; justify-content: center; position: fixed; top: 50%; left: 50%; z-index: 10; } .loader .circle { background-image:linear-gradient(90deg, #a03297, #e90b5a); width: 80px; height: 80px; border-style: solid; border-color: transparent; border-radius: 50%; border-width: 1px; animation: rot 2s linear infinite; padding: 10px; box-sizing: content-box; } .circle > div { background:white; height: 100%; width: 100%; border-style: solid; border-color:transparent; border-radius: 50%; border-width: 1px; } @keyframes rot { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg); } }

 <div class="loader"> <div class="circle"> <div></div> </div> </div> <p style="text-align: center; margin-top: 140px;">aaaaaaasssssssssssssssssçççççççççççççççççççççççççççççççççççççççççssssssss</p>

Answer 1

使用mask使内部部分透明：

 .loader { background:linear-gradient(yellow, #e90b5a); /* Show only 10px from the border */ -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#fff 0); mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#fff 0); width: 100px; height: 100px; border-radius: 50%; position: fixed; top: calc(50% - 50px); left: calc(50% - 50px); animation: rot 2s linear infinite; } @keyframes rot { 100% { transform: rotate(360deg); } } body { background:linear-gradient(to right,grey,white) }

 <div class="loader"></div>