Css 设置环绕一个圆旋转的动画
我正在尝试创建一个CSS动画,让一个环围绕一个圆旋转,但没有太大成功。我四处寻找,或多或少地想看看我是如何做到这一点的,我得出了以下结论:Css 设置环绕一个圆旋转的动画,css,css-animations,Css,Css Animations,我正在尝试创建一个CSS动画,让一个环围绕一个圆旋转,但没有太大成功。我四处寻找,或多或少地想看看我是如何做到这一点的,我得出了以下结论: html,正文{ 身高:100%; } #包装纸{ 对齐项目:居中; 显示器:flex; 高度:400px; 证明内容:中心; } #装载{ 高度:400px; 位置:相对位置; 宽度:400px; } img{ 位置:绝对位置; } .戒指{ 动画:环形线性2s无限; } @关键帧环{ 100% { 变换:旋转3d(1,1,1,-360度)旋转(-360
html,正文{
身高:100%;
}
#包装纸{
对齐项目:居中;
显示器:flex;
高度:400px;
证明内容:中心;
}
#装载{
高度:400px;
位置:相对位置;
宽度:400px;
}
img{
位置:绝对位置;
}
.戒指{
动画:环形线性2s无限;
}
@关键帧环{
100% {
变换:旋转3d(1,1,1,-360度)旋转(-360度)旋转y(360度);
}
}
注意,在第二个片段中,您正在从
旋转(120度)
到旋转(120度)
设置动画rotate()
在Z轴上旋转元素,这可能正是您需要的
如果您的目标只是旋转Yaxis上的元素,则应删除.ring
元素上的变换贴花,如下所示:
html,正文{
身高:100%;
}
#包装纸{
对齐项目:居中;
显示器:flex;
高度:400px;
证明内容:中心;
}
#装载{
高度:400px;
位置:相对位置;
宽度:400px;
}
img{
位置:绝对位置;
}
.戒指{
动画:环形线性6s无限;
变换:旋转(0度)旋转(120度);
}
@关键帧环{
到{变换:旋转(360度)旋转(120度);}
}
html,正文{
身高:100%;
}
#包装纸{
对齐项目:居中;
显示器:flex;
高度:400px;
证明内容:中心;
}
#装载{
高度:400px;
位置:相对位置;
宽度:400px;
}
img{
位置:绝对位置;
}
.戒指{
动画:环形线性2s无限;
}
@关键帧环{
100% {
变换:旋转(-360度);
}
}
您想要实现什么样的动画效果?圆应该如何精确旋转?暂时忘记旋转,动画将非常简单rotateY()
,一次又一次地围绕圆旋转。要实现这一点,应将环对角放置。我尝试了120度,但在实际情况下,我可能需要调整一点,但要保持动画像rotateY()
,只沿对角线方向。但是,当旋转环时,Y轴似乎“不再垂直”。第二个片段是在使环成对角线方向后,为完成此操作而进行的一次令人遗憾的尝试。它必须是对角的,因为在同一时间会有其他的环在不同的位置一起旋转。你的方法是在Y轴上旋转,是的,(这里我为这个错误道歉,我应该说是X轴),但它不是对角线。在这里,@user5613506 I已经更改了代码段以匹配所需的输出。请检查。现在我明白你关于Z轴的意思了,但不同的是,当它没有旋转时,前后的运动更加明显。它是否可以是“无限的”,就像它不断地、无休止地旋转一样?@user5613506没有来回运动。这是一个光学错觉,因为元素在Y轴上旋转360度。现在我看了一会儿,我注意到了这一点,但它可以避免吗?我的意思是,当动画开始时,形状曲线在左上
和右下
上,当它们在轴上进行动画时,它们逐渐变为右上
和左下
。这样做的目的是在不改变其原始位置的情况下使环围绕圆旋转,否则在实现时它们可能会与其他环的角碰撞