如何使用 CSS 为元素设置动画以在圆形路径中移动答案

【问题标题】：how to animate elements to move in a circular path using CSS如何使用 CSS 为元素设置动画以在圆形路径中移动
【发布时间】：2023-01-30 03:15:57
【问题描述】：

我希望我的元素（文本）沿圆形路径移动。我需要为此使用 CSS。我附上了我的代码。我面临的错误是我需要将我的元素转换为圆的周长。这会导致文本在动画开始和结束时跳到圆周上。我该如何解决这个问题？是否有另一种方法可以使对象动画化以沿圆形方向移动？

.element{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%); 
animation: orbit2 4s forwards;
}


@-webkit-keyframes orbit2 {
    from {  -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   {  -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

<div class= "element">
<a>NEN</a>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

像这样（或者甚至可以改变文本环绕圆圈的方式）：

#spin {
  position:absolute;
  top:25%;
  left:50%;
  margin:50px;
  animation: orbit 4s forwards infinite;
  animation-timing-function: linear;
}

@-webkit-keyframes orbit {
    from {  -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   {  -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

&lt;div id="spin"&gt;&lt;p&gt;text&lt;/p&gt;&lt;/div&gt;

【讨论】：