CSS3实现绕椭圆旋转效果的思路和方法是什�

Admin 2022-06-08 群英技术资�

这篇文章给大家介绍了“CSS3实现绕椭圆旋转效果的思路和方法是什么”的相关知识,讲解详细,步骤过程清晰,有一定的借鉴学习价值,因此分享给大家做个参考,感兴趣的朋友接下来一起跟随小编看看吧�

最近需要实现如下效�

最开始用css3D旋转写,只能实现如下效果

没办法把所有的圆转向正面,不知道是我的操作不对,还�3d旋转无法实现,有知道的大佬还请赐教啊

没法�3d实现只能转向2d了,只要实现按椭圆旋转就ok�

X轴Y轴在一个矩形内移动

路径为斜�

 .ball {
    animation: 
      animX 2s linear  infinite alternate,
      animY 2s linear  infinite alternate
  }
@keyframes animX{
      0% {left: 0px;}
    100% {left: 500px;}
}
@keyframes animY{
      0% {top: 0px;}
    100% {top: 300px;}
}

设置动画延迟

设置Y轴延迟为动画时长的一半,可以看到运动轨迹变成菱形了,有点感觉�

 .ball {
    animation: 
      animX 2s linear 0s infinite alternate,
      animY 2s linear -1s infinite alternate
  }

设置三次贝塞尔曲�

 .ball {
    animation: 
      animX 2s  cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
      animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate
  }

缩小放大

为了看起来有立体感添�scale属�,scale动画应该是X轴和Y轴的时间总和

.ball1 {
    animation: 
      animX 2s  cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
      animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
      scale 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  }
 @keyframes scale {

    0% {
      transform: scale(0.7)
    }
    50% {
      transform: scale(1)
    }
    100% {
      transform: scale(0.7)
   }
 }

大功告成�


以上就是关于“CSS3实现绕椭圆旋转效果的思路和方法是什么”的介绍了,感谢各位的阅读,如果大家想要了解更多相关的内容,欢迎关注群英网络,小编每天都会为大家更新不同的知识�

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部