CSS3 动画 - 2 个元素之间的圆弧

Question

我想在 2 个元素之间创建一个动态宽度的动画（取决于屏幕尺寸）。

有人可以给我提示如何实施吗？见附图。

Answer 1

如果您设法获得 div 来延长您想要覆盖的距离，则此解决方案可行：

设置2个动画，一个用于横轴，一个用于纵轴

.container {
  width: 400px;
  height: 100px;
  border: solid 1px blue;
  position: relative;
}

.container:nth-child(2) {
  width: 800px;
}

.inner {
  width: 25px;
  height: 25px;
  background-color: green;
  border-radius: 100%;
  animation-name: arctop, arcleft;
  animation-duration: 2s, 2s;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;
  position: absolute;
}

@keyframes arctop {
  0% {top: 75px; animation-timing-function: ease-out;}
  50% {top: 0px; animation-timing-function: ease-in;}
  100% {top: 75px;}
}

@keyframes arcleft {
  0% {left: 0px;}
  100% {left: calc(100% - 25px)}
}

<div class="container">
    <div class="inner"></div>
</div>
<div class="container">
    <div class="inner"></div>
</div>

CSS3 动画 - 2 个元素之间的圆弧

CSS3 animation - arc between 2 elements

css

css-transitions

css-transforms

css-animations