如何使用 CSS 沿圆形路径移动元素?

CSS 动画可以通过组合、旋转和平移等各种方式帮助我们变换元素。

以下示例说明了如何沿圆形路径移动元素。

示例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 8%;
   width: 35px;
   height: 35px;
   border-radius: 5px;
   background: red;
   animation: move 3s infinite linear;
}
@keyframes move {
   0% {
      transform: rotate(0deg) translateX(40px) rotate(0deg);
   }
   100% {
      transform: rotate(360deg) translateX(40px) rotate(-360deg);
   }
}
</style>
</head>
<body>
<div></div>
</body>
</html>

输出

这将产生以下结果 −

相关文章

• 使用 CSS Animation 为 transform 属性添加动画
• CSS word-spacing 属性动画
• CSS width 属性动画
• CSS outline-color 动画
• CSS text-decoration-color 属性动画
• 在 CSS perspective-origin 属性上执行动画
• CSS text-shadow 属性动画
• CSS text-indent 属性动画
• CSS top 属性动画
• CSS outline-offset 属性动画

有用资源

• css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/