作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想仅使用 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/
我确定一定有一种方法可以执行以下操作,但我不知道它叫什么,所以我无法用谷歌搜索它。 我需要一个从 A 到 B 的算法。有人知道它叫什么或有链接吗? 编辑:对不起,我不够清楚。图 A 由正方形组成,我基
我是一名优秀的程序员,十分优秀!