我这里有一个 jsfiddle - http://jsfiddle.net/w23v50h5/1/
div {
position: absolute;
left: 315px;
top: 143px;
width: 50px;
height: 50px;
background: red;
-webkit-animation: myOrbit 6s linear infinite;
-moz-animation: myOrbit 6s linear infinite;
-o-animation: myOrbit 6s linear infinite;
animation: myOrbit 6s linear infinite;
}
@-webkit-keyframes myOrbit {
from { -webkit-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg);}
to { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg); }
}
@-moz-keyframes myOrbit {
from { -moz-transform: rotate(0deg) translateX(100px) rotate(0deg); }
to { -moz-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
@-o-keyframes myOrbit {
from { -o-transform: rotate(0deg) translateX(100px) rotate(0deg); }
to { -o-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
@keyframes myOrbit {
from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
to { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
我正在使用 css transform 移动一个椭圆形的元素。
我希望元素移动的路径是一个更扁平的椭圆形。
我还喜欢对元素进行缩放,使其在椭圆形的顶部变小,在底部变大,从而给人一种椭圆形轨道向后和向前的印象。
任何人都可以帮助使轨道变平并缩放元素。
最佳答案
你可以像这样在动画中使用 % 而不是“from to”:
0% { -webkit-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg) scale(1); }
25% { -webkit-transform: rotate(90deg) translateX(5px) translateY(120px) rotate(-90deg) scale(.75); }
50% { -webkit-transform: rotate(180deg) translateX(5px) translateY(120px) rotate(-180deg) scale(.60); }
75% { -webkit-transform: rotate(270deg) translateX(5px) translateY(120px) rotate(-270deg) scale(.75); }
100% { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg) scale(1); }
一个 jsfiddle 实现: http://jsfiddle.net/jutmLgud/
关于CSS 变换以在椭圆路径中旋转元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26517662/