如何为椭圆形的文本设置动画？

Question

我正在尝试像这样在椭圆形周围设置文本动画：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9Vc1pqUi5wbmcuIn0=” alt =“椭圆周围的CSS文本动画”>

我找到了用圆形的解决方案，但是当我在椭圆动画中变换圆形时是断线。

有人知道该怎么做吗？我将不胜感激。

圈号：

var radius = 200; // adjust to move out items in and out
var fields = $('.carousel__item'),
  container = $('.carousel'),
  width = container.width(),
  height = container.height();
var angle = 0,
  step = (2 * Math.PI) / fields.length;
fields.each(function() {
  var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
  var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
  if (window.console) {
    console.log($(this).text(), x, y);
  }
  $(this).css({
    left: x + 'px',
    top: y + 'px'
  });
  angle += step;
});
.carousel {
  width: 400px;
  height: 400px;
  margin: 10px auto;
  position: relative;
  border-radius: 50%;
  animation: spin 60s linear infinite;
}

.carousel:hover {
  animation-play-state: paused;
}

.carousel:hover .carousel__item {
  animation-play-state: paused;
}

.carousel__item {
  text-align: center;
  width: 300px;
  position: absolute;
  animation: spin 60s linear infinite reverse;
  font-size: 1.4rem;
}

@keyframes spin {
  100% {
    transform: rotate(1turn);
  }
}

.carousel__item:hover {
  animation-play-state: paused;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel">
  <div class="carousel__item">TEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
</div>

我正在尝试像这样在椭圆形周围设置文本动画：我找到了带有圆形的解决方案，但是当我在椭圆形动画中变换圆形时会中断。有人知道该怎么做吗？我将不胜感激...

Answer 1

这里是一个想法，您不需要复杂的计算，只需要使用宽度/高度来控制形状。文本将始终围绕边​​框旋转，因此可以是圆形（宽度=高度）或省略号（高度！=宽度）。

Answer 2

您可以使用仅现代浏览器支持的offset-path来实现。

Answer 3

椭圆的方程类似于圆的方程，但是X和Y的半径不同。只需加上！！>