如何創建具有漸變邊框和透明度的 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>