在CSS中可以通过 @keyframes 动画 和 transform 属性实现元素的圆周活动。以下是一个示例代码：
示例代码
- <!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>
代码剖析
- 轨道 (.orbit):
- 设置了一个圆形轨道，大小为 200px，利用 border-radius: 50% 使其变成一个圆形。
- 活动物体 (.object):
- 起始位置在轨道顶部，通过 position: absolute 定位。
- 利用 transform: translate(-50%, -50%) 确保此中央点对齐。
- 动画 (@keyframes circular-motion):
- 利用 rotate 实现旋转活动，中央点是容器的中央。
- translateX(100px) 确保元素始终间隔圆心一定间隔。
- 无缝循环:
- 设置动画为 linear infinite，让物体匀速持续旋转。
你可以调解以下参数来修改结果：
- 调解轨道大小：修改 .orbit 的 width 和 height。
- 调解活动速度：更改 animation 的持续时间，如 4s。
- 改变活动间隔：更改 translateX 的值。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
