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

【问题标题】：How to create a CSS loader with gradient border and transparency?如何创建具有渐变边框和透明度的 CSS 加载器？
【发布时间】：2020-02-14 08:46:33
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

请向我们展示隐藏文本和出现问题的示例
好的，你现在有一个文本，你可以看到部分文本没有出现

标签： html css linear-gradients

【解决方案1】：

使用mask使内部透明：

.loader {
  background:linear-gradient(yellow, #e90b5a);
  /* Show only 10px from the border */
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 10px),#fff 0);
          mask:radial-gradient(farthest-side,#0000 calc(100% - 10px),#fff 0);
  border-radius: 50%;  
  position: fixed;
  inset : calc(50% - 50px);
  animation: rot 2s linear infinite; 
}

@keyframes rot {
   100% { transform: rotate(360deg); }
}

body {
  background:linear-gradient(to right,grey,white)
}

&lt;div class="loader"&gt;&lt;/div&gt;

【讨论】：