介绍, .ball {
动画:,,,,
,,,,,animX 2 s linear , infinite 备用,
,,,,,animY 2 s linear infinite 备用
,,}
@keyframes animX {
,,,,,,0%{左:0 px;}
,,,,100%{左:,500 px;}
}
@keyframes animY {
,,,,,,0%{最高:0 px;}
,,,100%,{:,300 px;}
} , .ball {
动画:,,,,
,,,,,animX 2 s linear 0 s infinite 备用,
,,,,,animY 2 s linear 1 s infinite 备用
以前,,} , .ball {
动画:,,,,
,,,,,animX 2 s , cubic-bezier (0.64, 0.36, 0, 1), 1 s infinite 备用,
,,,,,animY 2 s cubic-bezier (0.64, 0.36, 0, 1), 0 s infinite 备用
以前,,} .ball1 {
动画:,,,,
,,,,,animX 2 s , cubic-bezier (0.64, 0.36, 0, 1), 1 s infinite 备用,
,,,,,animY 2 s cubic-bezier (0.64, 0.36, 0, 1), 0 s infinite 备用,
,,,,,scale 4 s cubic-bezier (0.64, 0.36, 0, 1), 0 s infinite 备用;
,,}
,@keyframes scale {
,,,0%,{
,,,,,变换:,规模(0.7)
,,,}
,,,50%,{
,,,,,变换:,(1)规模
,,,}
,,,100%,{
,,,,,变换:,规模(0.7)
,,}
以前,}
这篇文章将为大家详细讲解有关使用css3怎么实现一个椭圆轨迹旋转,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
<强> X轴Y轴在一个矩形内移动
路径为斜线
<强>设置动画延迟
设置Y轴延迟为动画时长的一半,可以看到运动轨迹变成菱形了,有点感觉了
<强>设置三次贝塞尔曲线
<强>缩小放大
为了看起来有立体感添加<代码> 规模属性,规模动画应该是X轴和Y轴的时间总和
