css实现圆周运动效果

在CSS中可以通过 @keyframes 动画transform 属性实现元素的圆周运动。以下是一个示例代码:

示例代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS圆周运动</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #f4f4f4;
  }

  .orbit {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px dashed #aaa; /* 可选,显示圆的轨迹 */
    border-radius: 50%; /* 圆形轨道 */
  }

  .object {
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: circular-motion 4s linear infinite;
  }

  @keyframes circular-motion {
    0% {
      transform: translate(-50%, -50%) rotate(0deg) translateX(100px);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg) translateX(100px);
    }
  }
</style>
</head>
<body>
  <div class="orbit">
    <div class="object"></div>
  </div>
</body>
</html>

代码解析

  1. 轨道 (.orbit):

    • 设置了一个圆形轨道,大小为 200px,使用 border-radius: 50% 使其变成一个圆形。
  2. 运动物体 (.object):

    • 起始位置在轨道顶部,通过 position: absolute 定位。
    • 使用 transform: translate(-50%, -50%) 确保其中心点对齐。
  3. 动画 (@keyframes circular-motion):

    • 利用 rotate 实现旋转运动,中心点是容器的中心。
    • translateX(100px) 确保元素始终距离圆心一定距离。
  4. 无缝循环:

    • 设置动画为 linear infinite,让物体匀速持续旋转。

你可以调整以下参数来修改效果:

  • 调整轨道大小:修改 .orbitwidthheight
  • 调整运动速度:更改 animation 的持续时间,如 4s
  • 改变运动距离:更改 translateX 的值。
相关推荐
慧一居士35 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead37 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app