javascript - 具有透明背景的 CSS 馅饼微调器/加载器-6ren

javascript - 具有透明背景的 CSS 馅饼微调器/加载器

转载作者：行者123 更新时间：2023-11-28 02:43:49

我只需要使用 css 和 javascript 制作一个饼图旋转器/加载器。

到目前为止，我设法让它在背景为纯色时工作，因为它不需要查看隐藏半圆的 div(不要介意颜色和顶部/左侧):

.wrapper {
  position: relative;
  background: transparent;
  width: 50px;
  height: 50px;
  background: gray;
}

.wrapper,
.wrapper * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper .pie,
.wrapper * .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: red;
}

.wrapper .spinner,
.wrapper * .spinner {
  border-radius: 100% 0 0 100%/50% 0 0 50%;
  z-index: 200;
  border-right: none;
  animation: rota 5s linear infinite
}

.wrapper .filler,
.wrapper * .filler {
  border-radius: 0 100% 100% 0/0 50% 50% 0;
  left: 50%;
  opacity: 0;
  z-index: 100;
  border-left: none;
  background: red;
  animation: opa 5s steps(1, end) infinite reverse
}

.wrapper .mask,
.wrapper * .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: 1;
  z-index: 300;
  animation: opa 5s steps(1, end) infinite
}

.wrapper:hover .spinner,
.wrapper:hover .filler,
.wrapper:hover .mask {
  animation-play-state: running;
}

@-moz-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-o-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

@-moz-keyframes opa {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes opa {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@-o-keyframes opa {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes opa {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

<div class="wrapper">
  <div class="pie spinner"></div>
  <div class="pie filler"></div>
  <div class="mask"></div>
</div>

问题是，我需要使背景透明，这样我才能看到它，但是 mask div 变得无用了:

body {
  background-image: url(http://www.publicdomainpictures.net/pictures/20000/velka/tulip-flower-garden.jpg)
}

.wrapper {
  position: relative;
  background: transparent;
  width: 50px;
  height: 50px;
  background: transparent;
}

.wrapper,
.wrapper * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper .pie,
.wrapper * .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: red;
}

.wrapper .spinner,
.wrapper * .spinner {
  border-radius: 100% 0 0 100%/50% 0 0 50%;
  z-index: 200;
  border-right: none;
  animation: rota 5s linear infinite
}

.wrapper .filler,
.wrapper * .filler {
  border-radius: 0 100% 100% 0/0 50% 50% 0;
  left: 50%;
  opacity: 0;
  z-index: 100;
  border-left: none;
  background: red;
  animation: opa 5s steps(1, end) infinite reverse
}

.wrapper .mask,
.wrapper * .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: 1;
  z-index: 300;
  animation: opa 5s steps(1, end) infinite
}

.wrapper:hover .spinner,
.wrapper:hover .filler,
.wrapper:hover .mask {
  animation-play-state: running;
}

@-moz-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-o-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

@-moz-keyframes opa {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes opa {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@-o-keyframes opa {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes opa {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

<div class="wrapper">
  <div class="pie spinner"></div>
  <div class="pie filler"></div>
  <div class="mask"></div>
</div>

有没有可能实现我想要的？怎么办？

最佳答案

.wrapper {
  position: relative;
  background: transparent !important; 
  width: 50px;
  height: 50px;
  background: gray;
}

.wrapper,
.wrapper * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper .pie,
.wrapper * .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: red;
}

.wrapper .spinner,
.wrapper * .spinner {
  border-radius: 100% 0 0 100%/50% 0 0 50%;
  z-index: 200;
  border-right: none;
  animation: rota 5s linear infinite
}

.wrapper .filler,
.wrapper * .filler {
  border-radius: 0 100% 100% 0/0 50% 50% 0;
  left: 50%;
  opacity: 0;
  z-index: 100;
  border-left: none;
  background: red;
  animation: opa 5s steps(1, end) infinite reverse
}

.wrapper .mask,
.wrapper * .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: 1;
  z-index: 300;
  animation: opa 5s steps(1, end) infinite
}

.wrapper:hover .spinner,
.wrapper:hover .filler,
.wrapper:hover .mask {
  animation-play-state: running;
}

@-moz-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-o-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

@-moz-keyframes opa {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes opa {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@-o-keyframes opa {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes opa {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

<div class="wrapper">
  <div class="pie spinner"></div>
  <div class="pie filler"></div>
  <div class="mask"></div>
</div>

添加背景透明重要

.wrapper { background: transparent !important; }

关于javascript - 具有透明背景的 CSS 馅饼微调器/加载器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42416277/

文章推荐： javascript - Quill 格式化所有文本

文章推荐： html - CSS 完全用颜色填充 div

文章推荐： html - 视频叠加不显示

文章推荐： javascript - 如何将网址转换为图片？

iphone - 禁用时避免使 UIButton 透明/透明
我想禁用我的 UIButton，所以我调用: button.enabled = FALSE; 然而，这会使按钮变得透明，我可以看到它下面的元素。我不介意它改变颜色，我只是不希望它是透明的。我尝试在
swift - 当 isEnabled 为 false(禁用)时避免使 NSButton 透明/透明
一个常规的 NSButton 如果被禁用，它似乎是透明的。图像显示了一个样式为“push”的按钮但是，我想禁用没有透明度的按钮。我试图以编程方式将 alphaValue 设置为 1.0 但似乎
video - 透明.mov视频转换成具有透明背景ffmpeg的png序列
我正在尝试将Memoji从iPhone/Mac转换为具有透明背景的一系列png，以便我可以创建一个 Sprite 表。当按下空格键时，我可以清楚地看到它具有透明背景，但是在运行 ffmpeg -i s
tornadofx - 透明 View
我想创建一个具有部分透明背景的 View (舞台、窗口)。我有一张包含 Alpha channel 的图像我在JavaFx中使用了这种场景，我必须将场景填充设置为空，并将根节点背景颜色设置为透明。我
tornadofx - 透明 View
我想创建一个具有部分透明背景的 View (舞台、窗口)。我有一张包含 Alpha channel 的图像我在JavaFx中使用了这种场景，我必须将场景填充设置为空，并将根节点背景颜色设置为透明。我
java - 透明 JDesktopPane
我想将 JDesktopPane 设置为透明，并允许我单击下面的内容(例如桌面图标等)。内部框架应保持不透明，并且能够像当前一样在屏幕周围重新定位。有什么想法吗？ package test1;
java - 透明.png背景
我知道我不是第一个提出此类问题的人，但我认为我的问题有点不同。我在 MS Paint 上绘制了一个 png 图像，它是一个播放器，当我使用图形对象绘制图像时，我希望图像的背景是透明的。我尝试了一些带
swift - 如何设置单选按钮的背景不透明/透明？
我在 Mac 的 swift 项目中想使用单选按钮，但与我的背景颜色相同。如何将背景设置为不透明或更改背景颜色？最佳答案我找到了解决此问题的方法。将单选按钮的文本设置为“”，将 rb 添加到水平堆
Android RelativeLayout 透明
我无法将我的相对布局设置为透明。我尝试了很多不同的方法，从类中自定义 View ，添加 android:background="@android:color/transparent"等。它们要么像下图
ios - UINavigationController工具栏100%透明
在 Storyboard中，我创建了一个 ![UINavigationController] 及其 Root View Controller UIViewcontroller。在工具栏中，我有一个分段
Swift 透明 UINavigationBar
我必须让我的导航栏透明，我试过这段代码: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIB
ios - 透明查看颜色从黑色到其他颜色？
我注意到，如果我将 View 背景颜色设置为透明，则在 segue 过渡结束后背景颜色会变成黑色(我猜这是默认的“视口(viewport)”颜色)。我可以改变吗？当然，我可以将颜色从透明更改为紫色，
html - 如何使滚动条不可见-透明
嘿，有没有可能让滚动条“隐藏”，我不想使用 overflow-y: hidden就像背景:透明或类似的东西最佳答案 Here您会找到有关如何仅使用 CSS 隐藏滚动条的说明。在第二个example
javascript - 如何使谷歌自定义搜索引擎的背景(透明)？
默认情况下，背景显示为白色。是否可以通过任何方式将其背景颜色更改为透明..？ (function() { var cx = '005519348941191855053:d0uziw7c
html - 左右边缘的插图框阴影褪色/透明
我正在尝试添加一个在 div 的左右边缘具有透明度/淡出的嵌入框阴影。我设法添加了一个普通的嵌入框阴影，但我不知道如何为边缘添加透明度。我该怎么做？这是我正在努力实现的一个例子。 .contai
html - 透明、无边框的文本输入
如何删除周围的边框并使其背景透明？最佳答案试试这个: border: none; border-color: transparent; 关于html - 透明、无边框的文本输入，我们在Stac
java - 透明 JButton
是否可以使 JButton 透明(包括边框)而不是文本？我扩展了 swing 的 JButton 并覆盖了它: @Override public void paint(Graphics g) {
c++ - 如何创建半透明/透明 `QOpenGLWindow`
众所周知，要使QWidget/QOpenGLWidget半透明/透明，只需: widget->setAttribute(Qt::WA_TranslucentBackground) 但是，由于 QWin
Ubuntu 透明 Gnome 终端
我想知道如何在 Ubuntu 中为所有应用程序制作透明 Gnome 终端，我知道我们可以为桌面制作透明终端，而不是为所有应用程序制作透明终端。我用谷歌搜索了很多，但找不到任何解决方案。谁能告诉我该怎么
eclipse - 透明 SWT Canvas
我想让 SWT Canvas 的背景透明，以便可以看到它后面的其他小部件。我尝试将 alpha 设置为 0 并用矩形填充 Canvas ，并且还使用选项 SWT.NO_BACKGROUND 无济于事

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 具有透明背景的 CSS 馅饼微调器/加载器