之前的文章《手把手教你使用Vue2代码改成Vue3(图文详解)》中,给大家介绍了怎么使用Vue2代码改成Vue3。下面本篇文章给大家了解css3实现椭圆轨迹旋转,小伙伴们收藏好哦~
css3实现椭圆轨迹旋转
最近需要实现如下效果
最开始用css3D
旋转写,只能实现如下效果
没办法把所有的圆转向正面,不知道是我的操作不对,还是3d
旋转无法实现,有知道的大佬还请赐教啊
没法用3d
实现只能转向2d
了,只要实现按椭圆旋转就ok了
1、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;} }
2、设置动画延迟
设置Y轴动画延迟为动画时长的一半(延迟设为负数动画开始不会有延迟空白,感兴趣的同学可以试试正数延迟),可以看到运动轨迹变成菱形了,有点感觉了
.ball { animation: animX 2s linear 0s infinite alternate, animY 2s linear -1s infinite alternate }
3、设置三次贝塞尔曲线
.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 }
4、缩小放大
为了看起来有立体感添加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) } }
大功告成!
完整效果地址:https://codepen.io/yaowei9363/pen/PyXvNe?editors=1100
推荐学习:CSS3视频教程
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。