Question

我正在尝试创建几条线围绕圆形div旋转的动画。

像这样的东西

这是我的html＆amp; css

＆＃13;

.outCircle {
  width: 20px;
  height: 20px;
  background-color: lightblue;
  left: 270px;
  position: absolute;
  top: 50px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
}
.duringTen {
  -webkit-animation-duration: 5s;
}
.infinite {
  -webkit-animation-iteration-count: infinite;
}
.linear {
  -webkit-animation-timing-function: linear;
}
.counter {
  width: 30px;
  height: 30px;
  -webkit-animation-duration: inherit;
  -webkit-animation-direction: reverse;
  -webkit-animation-timing-function: inherit;
  -webkit-animation-iteration-count: inherit;
  -webkit-animation-name: inherit;
}
.rotate {
  width: 100%;
  height: 100%;
  -webkit-animation-name: circle;
  position: relative;
  z-index: 10;
  display: block;
}
.inner {
  width: 20px;
  height: 2px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 100px;
  position: absolute;
  left: 0px;
  top: 5px;
  background-color: red;
  display: block;
}
.red {
  background: red;
}
.green {
  background: green;
}
@keyframes circle {
  from {
    -webkit-transform: rotateZ(0deg)
  }
  to {
    -webkit-transform: rotateZ(360deg)
  }
}

＆＃13;

<div class="outCircle">
  <div class="rotate linear infinite duringTen">
    <div class="counter">
      <div class="inner">
      </div>
    </div>
  </div>
</div>

＆＃13;

我的尝试只有一行，但我想创建更多的行，就像我上面发布的图片。这就是我来的

Answer 1

也许是这样的：

.outCircle {
  width: 20px;
  height: 20px;
  background-color: lightblue;
  position: relative;
  border-radius: 50%;
  margin: 100px auto;
}
.marker {
  width: 50px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: linear-gradient(to right, black, black 25%, transparent 25%, transparent 75%, black 75%);
  transform: translate(-50%, -50%);
}
.vert {
  width: 2px;
  height: 50px;
  background: linear-gradient(to bottom, black, black 25%, transparent 25%, transparent 75%, red 75%);
  transform: translate(-50%, -50%);
}
.angle-1 {
  transform: translate(-50%, -50%) rotate(45deg);
}
.angle-2 {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: circle 3s linear infinite;
}
@keyframes circle {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

<div class="outCircle">
  <div class="inner">
    <div class="marker horiz"></div>
    <div class="marker vert"></div>
    <div class="marker angle-1"></div>
    <div class="marker angle-2"></div>
  </div>
</div>

请注意，这是快速而又脏的......只需要一点时间就可以简化，也许可以通过对某些标记使用伪元素。

总的来说，SVG可能会更好。

绕圆圈绕轨道运行

1 个答案: