css - 我想要一个类似于 HTML5 的视频加载器的 CSS3 加载旋转动画

问题描述

我现在有一些代码，但感觉不像 HTML5 的视频元素加载器那样“自然”。

如何微调这个 CSS3 加载器，使其更类似于视频元素的加载器？

现在我有 2 个元素不断旋转，中间有短暂的延迟。

我只是不知道我是否需要提高这个延迟，或者需要一些更复杂的贝塞尔动画：

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}
.loader {
  color: #555555;
  margin: 15px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 0.4em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before,
.loader:after {
  position: absolute;
  content: '';
}
.loader:before {
  width: 5.2em;
  height: 10.4em;
  background: black;
  border-radius: 10.4em 0 0 10.4em;
  top: -0.2em;
  left: -0.2em;
  -webkit-transform-origin: 5.2em 5.2em;
  transform-origin: 5.2em 5.2em;
  -webkit-animation: load 1.2s infinite ease 0.2s;
  animation: load 1.2s infinite ease 0.2s;
  transition-timing-function: cubic-bezier(1.0, 0.5, 1.0, 0.1);
}
.loader:after {
  width: 5.2em;
  height: 10.4em;
  background: black;
  border-radius: 0 10.4em 10.4em 0;
  top: -0.2em;
  left: 5.0em;
  -webkit-transform-origin: 0.0em 5.2em;
  transform-origin: 0.0em 5.2em;
  -webkit-animation: load 1.2s infinite ease;
  animation: load 1.2s infinite ease;
  transition-timing-function: cubic-bezier(0.1, 1.0, 0.5, 1.0);
}
@-webkit-keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loader .label {
font-size: 16px;
position: absolute;
top: 110%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: block;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body bgcolor=black>

<h2>How To Create A Loader</h2>

<div class="loader"><div class="label">Loading...</div></div>

</body>
</html>

例如，这是我正在寻找的一个简单的微调器（它也改变了它的颜色，但它不在这个问题中）：

材料设计也使用它作为加载器，这是一个 JS + CSS 解决方案，但我需要没有 SVG（纯 CSS3）的东西：https ://www.jqueryscript.net/demo/Material-Design-Style-Loading-Spinner-with- jQuery-CSS3/

标签： csscss-transitions

css - 我想要一个类似于 HTML5 的视频加载器的 CSS3 加载旋转动画

问题描述

解决方案

推荐阅读