Animation 实现匀速旋转

如何使用 Animation 实现物体的匀速旋转。思路很简单,只需要0度和360(或-360)度两个关键帧,然后将动画设为循环播放。当时以为这样事情就成了。谁知做出来的效果是下面这样,物体转完一圈后会停一下:

我知道问题就在动画曲线上:

只要把曲线弄成一条直线就行。

但是当时折腾了一会儿也没调出一条漂亮的直线,因此还是改用代码来实现匀速旋转。今天发现其实根本不用手调,只要右键单击,把起始关键帧的 Right Tangent 和结尾关键帧的 Left Tangent 改为 Linear (线性)就可以了:

完美:

其实以前也知道 Free、Linear 和 Constant 这几个选项,但从来没用上也没真正理解它们的用处。如今才知道是怎么回事,至少理解 Linear 了。

 

  • 8
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 包含了许多特效,其中之一就是匀速旋转图形。在使用css实现匀速旋转图形时,可以使用css3的transform属性来实现。通过设置旋转的度数和动画的时间来实现匀速旋转效果。 首先,需要创建一个父元素,设置其宽度、高度和位置等属性。然后,通过transform属性设置父元素的旋转角度,可以使用rotateX或rotateY来设置旋转的轴向和角度。同时,通过animation属性设置动画效果,包括持续时间和动画方式等。 接下来,创建子元素,并设置背景颜色等样式。通过transform属性设置子元素的位移和旋转角度,可以使用translateZ来设置子元素的位移距离,通过rotateY来设置子元素的水平旋转角度。 通过以上步骤,就可以实现一个css匀速旋转图形。具体实现代码如下: ```css .box { width: 300px; height: 300px; margin: 150px auto; position: relative; transform-style: preserve-3d; /* 形成3d效果 */ transform: rotateY(28deg) rotateX(11deg); /* y轴旋转28deg ,x轴旋转11deg 方便观察*/ animation: sPinxz 6s linear infinite; /* 动画效果 匀速 重复 */ } .box2 { background: green; transform: translateZ(-150px) rotateY(180deg); /* 向后150px 旋转180度*/ } ``` 通过以上代码,可以实现一个匀速旋转的图形。其中,`.box`是父元素,`.box2`是子元素,通过设置不同的样式和旋转角度,可以实现不同的匀速旋转效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [CSS3 3d旋转图片立方体特效代码](https://blog.csdn.net/chenqx182/article/details/104736598)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值