文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >当我调暗加载元素的整个页面时，旋转器的元素也会变暗

问当我调暗加载元素的整个页面时，旋转器的元素也会变暗
EN

Stack Overflow用户
提问于 2021-08-18 15:27:02
回答 1查看 23关注 0票数 1

我已经实现了一个加载旋转图标，这是覆盖在页面上。它看起来很好，但是当我尝试通过使用

代码语言：javascript
复制
background-color: rgba(0, 0, 0, 0.4);

在.spinner-container单元中，加载单元的频带也变暗了。

看这些照片..。

​

​

​

​

我想在暗淡的灰色背景上保留这些鲜艳的颜色。

你知道我能实现什么来改变这种情况吗？

​

代码语言：javascript
复制
.spinner-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
}

@keyframes blink {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

.three-dots span {
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.three-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.three-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

.spinner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
}

.spinner-sector {
  border-radius: 50%;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 15px solid transparent;
  mix-blend-mode: overlay;
}

.spinner-text {
  font-size: 2em;
}

.spinner-sector-blue {
  animation: rotate 2s ease-out infinite;
  border-top: 15px solid lightblue;
}

.spinner-sector-red {
  animation: rotate 2.5s ease-in infinite;
  border-top: 15px solid lightcoral;
}

.spinner-sector-green {
  animation: rotate 1.5s ease-in-out infinite;
  border-top: 15px solid lightgreen;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes loading-opacity {
  0%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.1;
  }
}
代码语言：javascript
复制
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="spinner-container">
    <div class="spinner">
      <div class="spinner-text three-dots">Loading<span>.</span><span>.</span><span>.</span></div>
      <div class="spinner-sector spinner-sector-red"></div>
      <div class="spinner-sector spinner-sector-blue"></div>
      <div class="spinner-sector spinner-sector-green"></div>
    </div>
  </div>
</body>
</html>

​

css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-18 15:32:18

您在.spinner-sector元素上使用了mix-blend-mode: overlay; (documentation)，它将鲜艳的颜色与下面变暗的页面混合在一起。

去掉它，你会得到：

​

代码语言：javascript
复制
.spinner-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
}

@keyframes blink {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

.three-dots span {
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.three-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.three-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

.spinner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
}

.spinner-sector {
  border-radius: 50%;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 15px solid transparent;
}

.spinner-text {
  font-size: 2em;
}

.spinner-sector-blue {
  animation: rotate 2s ease-out infinite;
  border-top: 15px solid lightblue;
}

.spinner-sector-red {
  animation: rotate 2.5s ease-in infinite;
  border-top: 15px solid lightcoral;
}

.spinner-sector-green {
  animation: rotate 1.5s ease-in-out infinite;
  border-top: 15px solid lightgreen;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes loading-opacity {
  0%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.1;
  }
}
代码语言：javascript
复制
<div class="spinner-container">
  <div class="spinner">
    <div class="spinner-text three-dots">Loading<span>.</span><span>.</span><span>.</span></div>
    <div class="spinner-sector spinner-sector-red"></div>
    <div class="spinner-sector spinner-sector-blue"></div>
    <div class="spinner-sector spinner-sector-green"></div>
  </div>
</div>

​

或者，为了保持混合效果，你可以切换到一个不会使加载动画变暗的选项，例如hard-light

​

代码语言：javascript
复制
.spinner-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
}

@keyframes blink {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

.three-dots span {
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.three-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.three-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

.spinner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
}

.spinner-sector {
  border-radius: 50%;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 15px solid transparent;
  mix-blend-mode: hard-light;
}

.spinner-text {
  font-size: 2em;
}

.spinner-sector-blue {
  animation: rotate 2s ease-out infinite;
  border-top: 15px solid lightblue;
}

.spinner-sector-red {
  animation: rotate 2.5s ease-in infinite;
  border-top: 15px solid lightcoral;
}

.spinner-sector-green {
  animation: rotate 1.5s ease-in-out infinite;
  border-top: 15px solid lightgreen;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes loading-opacity {
  0%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.1;
  }
}
代码语言：javascript
复制
<div class="spinner-container">
  <div class="spinner">
    <div class="spinner-text three-dots">Loading<span>.</span><span>.</span><span>.</span></div>
    <div class="spinner-sector spinner-sector-red"></div>
    <div class="spinner-sector spinner-sector-blue"></div>
    <div class="spinner-sector spinner-sector-green"></div>
  </div>
</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/68835252

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档