html - 使用字母 "D"的 CSS 自定义微调器

Question

我正在尝试在字母“D”上创建自定义微调器(与动画椭圆或带旋转条的圆等相对)。这是我目前拥有的微调器形状代码:

HTML:

<div class="spinnerContainer"></div>
<div class="loader"></div>

CSS:

.spinnerContainer {
    width: 40px;
    height: 50px;
    border-bottom-right-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    transform: rotate(0deg);
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

出于示例目的，我还包括了这个以及 W3Schools 的微调器实现，在此处的 jsfiddle 中:https://jsfiddle.net/wuvc70sp/1/但我想知道如何简单轻松地为“D”设置动画，类似于 W3Schools 微调器上圆圈上的动画。

我尝试使用 CSS 动画来单独制作每个组件(即垂直线有自己的动画，曲线上的直线部分有自己的动画，等等)，但效果不佳，并且没有这似乎也不是一个优雅的解决方案。我对更复杂的 CSS 动画比较陌生，所以如果这是相对简单的事情，请原谅。

*** 编辑 *** 澄清一下，我不想让“D”旋转。相反，我想通过“D”蜿蜒不同的颜色，就好像“D”是一条赛道，而颜色是一辆汽车行驶的圈数。

Answer 1

只需为此使用 CSS 动画。

.spinner {
    width: 40px;
    height: 50px;
    border-bottom-right-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    transform: rotate(0deg);
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    margin: 50px;
    animation: 3s spin infinite linear;
}

@keyframes spin {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

<div class="spinner"></div>