cuốn sách gpt4 ai đã làm

css - 动画 SVG 组

In lại Tác giả: Walker 123 更新时间:2023-11-28 09:33:09 26 4
mua khóa gpt4 Nike

我目前有以下 SVG:











我目前正在 g.rotatable 上制作旋转动画但是我想用 如果可能的话,我还没弄清楚怎么做。

我试过将它放在组的开头、底部,甚至在它之后,但是没有任何影响。

    

由于我从未真正使用过 SVG 或为它们制作动画,所以我不确定我哪里出错了。

svg.tower .rotatable {
animation: tower 5s linear infinite;
}

@keyframes tower {
0% {
transform: rotate(315deg);
}
40% {
transform: rotate(90deg);
}
75% {
transform: rotate(200deg);
}
100% {
transform: rotate(315deg);
}
}

上面是我当前的 CSS 动画。

任何人都可以告诉我哪里出错了,这样我就可以改正我的错误,或者如果可能的话,这样我就有可能放弃这一行动。

câu trả lời hay nhất

Note: You may want to reconsider using SMIL animations instead of CSS animations because Chrome has deprecated support for SMIL animations from v45.

您的代码中存在两个问题,如下所示:

  1. rotate biến đổi在 SVG 中,只需将度数作为值,不需要向其添加 deg 后缀。此外,还可以指定变换原点(第 2nd 和第 3rd 参数),但这不是强制性的。
  2. hiện hữu .rotatable 元素上有一个 style='transform: rotate(...)'。 CSS 覆盖了 animateTransform,因此您看不到任何旋转。避免这种 phong cách 设置。如果需要初始旋转,您可以使用 SVG 的 biến đổi tài sản.

下面是一个工作演示:











关于css - 动画 SVG 组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41872057/

26 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress