css实现圆周活动结果
在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>
https://i-blog.csdnimg.cn/direct/a7f12f8ff35f438bba9e0545254ffae0.png
代码剖析
[*] 轨道 (.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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]