gpt4 book ai didi

css - 围绕另一个大圆的圆周动画一个圆

转载 作者:行者123 更新时间:2023-12-05 08:30:03 24 4
gpt4 key购买 nike

我想仅使用 CSS 围绕大圆的圆周移动一个小圆。

@keyframes moveAround {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

#small {
animation: moveAround 2s infinite linear;
}
<svg width="120" height="100" viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="circles">
<circle id="big" cx="60" cy="50" r="30" fill="white" stroke="#2493AB" stroke-width="20" />
<circle id="small" cx="60" cy="20" r="10" fill="#EF6868" />
</g>
</svg>

最佳答案

您必须指定圆应该围绕哪个坐标旋转。默认情况下,这是坐标 0,0,但您希望它围绕大圆的中心运行。

在 CSS 中,您可以使用 transform-origin 执行此操作:

#small {
transform-origin: 60px 50px;
animation: moveAround 2s infinite linear;
}
@keyframes moveAround {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<svg width="120" height="100" viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="circles">
<circle id="big" cx="60" cy="50" r="30" fill="white" stroke="#2493AB" stroke-width="20" />
<circle id="small" cx="60" cy="20" r="10" fill="#EF6868" />
</g>
</svg>

关于css - 围绕另一个大圆的圆周动画一个圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66838390/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com