css3实现椭圆轨迹旋转

发布时间:2021-01-12 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了css3实现椭圆轨迹旋转前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

实现效果

css3实现椭圆轨迹旋转

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

做斜线运动

.ball {

position: absolute;

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.64,1) -1s infinite alternate,

animY 2s cubic-bezier(0.36,1) 0s infinite alternate

}

缩小放大

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

.ball1 {

animation:

animX 2s cubic-bezier(0.36,1) 0s infinite alternate,

scale 4s cubic-bezier(0.36,1) 0s infinite alternate;

}

@keyframes scale {

0% {

transform: scale(0.7)

}

50% {

transform: scale(1)

}

100% {

transform: scale(0.7)

}

}

总结


以上是前端之家为你收集整理的css3实现椭圆轨迹旋转全部内容,希望文章能够帮你解决css3实现椭圆轨迹旋转所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。