html – 在CSS中顺畅地围绕对象旋转

概述我有两个图像在DOM元素周围移动.但是它们的旋转是错误的,并且运动不顺畅. 我的小提琴 #mainPage { width: 400px; height: 165px; margin: 10% auto;}#mainPage>p { text-align: center;}.bicycle { width: 48px; height: 30px; backg 我有两个图像在DOM元素周围移动.但是它们的旋转是错误的,并且运动不顺畅.

我的小提琴

#mainPage {  wIDth: 400px;  height: 165px;  margin: 10% auto;}#mainPage>p {  text-align: center;}.bicycle {  wIDth: 48px;  height: 30px;  background: red;}#bicycleOriginal {  animation: moveBicycleOriginal 20s infinite;}#bicycleFlipped {  animation: moveBicycleFlipped 20s infinite;}#mainTxt {  letter-spacing: 7px;  Font-size: 30px;  margin-bottom: 30px;}@keyframes moveBicycleOriginal {  from {    transform: translate(0,0);  }  1% {    transform: translate(0,0) rotate(0deg);  }  25% {    transform: translate(350px,0);  }  26% {    transform: translate(350px,0) rotate(90deg);  }  50% {    transform: translate(350px,150px);  }  51% {    transform: translate(350px,150px) rotate(180deg);  }  75% {    transform: translate(0,150px);  }  76% {    transform: translate(0,150px) rotate(270deg);  }  to {    transform: translate(0,0);  }}@keyframes moveBicycleFlipped {  from {    transform: translate(350px,0);  }  1% {    transform: translate(350px,0) rotate(0deg);  }  25% {    transform: translate(0,0);  }  26% {    transform: translate(0,0) rotate(90deg);  }  50% {    transform: translate(0,-150px);  }  51% {    transform: translate(0,-150px) rotate(180deg);  }  75% {    transform: translate(350px,-150px);  }  76% {    transform: translate(350px,-150px) rotate(270deg);  }  to {    transform: translate(350px,0);  }}

<div ID="mainPage">  <div  ID="bicycleOriginal"></div>  <p  ID="mainTxt">DRAHTESEL</p>  <div  ID="bicycleFlipped"></div></div>

所以我想要的是这样的

通过第一个关键帧后,框进入错误的旋转.此外,它们不能平稳移动,中间越快,到达终点越慢.

有人可以帮我关键帧吗？

解决方法 您需要始终保持在变换中定义的旋转,因为每个变换将覆盖前一个变换,并且移除旋转意味着旋转(0).

为了使动画更准确,最后一个状态应该类似于第一个状态,以避免重新启动动画时的跳转.所以你应该进行360度旋转,相当于0度. (就像你在翻译中所做的那样,你回到初始值).

然后,您可以根据需要调整animation-timing-function以控制动画进度.

#mainPage {  wIDth: 400px;  height: 165px;  margin: 10% auto;}#mainPage>p {  text-align: center;}.bicycle {  wIDth: 48px;  height: 30px;  background: red;}#bicycleOriginal {  animation: moveBicycleOriginal 20s infinite;}#bicycleFlipped {  animation: moveBicycleFlipped 20s infinite;}#mainTxt {  letter-spacing: 7px;  Font-size: 30px;  margin-bottom: 30px;}@keyframes moveBicycleOriginal {  from {    transform: translate(0,0) rotate(0deg);  }  26% {    transform: translate(350px,150px) rotate(90deg);  }  51% {    transform: translate(350px,150px) rotate(180deg);  }  76% {    transform: translate(0,150px) rotate(270deg);  }  98% {    transform: translate(0,0) rotate(270deg);  }  to {    transform: translate(0,0) rotate(360deg);  }}@keyframes moveBicycleFlipped {  from {    transform: translate(350px,0) rotate(0deg);  }  26% {    transform: translate(0,-150px) rotate(90deg);  }  51% {    transform: translate(0,-150px) rotate(180deg);  }  76% {    transform: translate(350px,-150px) rotate(270deg);  }  97% {    transform: translate(350px,0) rotate(270deg);  }  to {    transform: translate(350px,0) rotate(360deg);  }}

<div ID="mainPage">  <div  ID="bicycleOriginal"></div>  <p  ID="mainTxt">DRAHTESEL</p>  <div  ID="bicycleFlipped"></div></div>

总结

以上是内存溢出为你收集整理的html – 在CSS中顺畅地围绕对象旋转全部内容，希望文章能够帮你解决html – 在CSS中顺畅地围绕对象旋转所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。