html - 如何创建具有渐变边框和透明度的 CSS 加载器?
问题描述
我正在尝试使用 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>
解决方案
用于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>
推荐阅读
- javascript - 如何在html中添加半圆连接器?
- typescript - 构建包含多个具有自己别名的包的项目时的问题
- php - redirectToRoute Symfony5 上的上一页
- c - 指针为零时了解 Clang 的优化
- java - 更改相同变量的线程不会同步
- ios - 使用 Swift 的 .hash 进行密码存储/检查
- system-verilog - 我可以提供宏/参考作为测试台中分层访问的参数吗?(SystemVerilog)
- android - Android CMake:如何检查编译时是否考虑了 cppFlags 和参数?
- c# - 从 XPathIterator C# 中提取节点的当前 XPath
- git - 如何切换到新分支并恢复更改?