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

发布时间：2023-10-04 14:16:27 所属栏目：语言来源：

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

没

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

没办法把所有的圆转向正面，不知道是我的操作不对，还是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)

   }

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!