CSS3动画,让绝对定位的元素沿圆弧移动,
@keyframes bimg1 { 0% {top: 10%;left: 12%;width:50%;} 30% {top: -10%;left: -12%;width:45%;} 100% {top: 19%;left: 52%;width:40%;} }
这样写的话,会是线性的移动,从一个点,移动到另外一个点,想要的效果是按圆弧来移动
欢迎选择我的课程,让我们一起见证您的进步~~
x轴和y轴的动画分开写,然后两个速度不一样就会形成曲线运动,具体曲线可以通过计算,随便写了个也可以直接给对应关键帧的x,y值
@keyframes bimg1 { 0% {top: 0;} 100% {top: 200px;} } @keyframes bimg2 { 0% {left: 0;} 100% {left: 200px;} } #item { animation: bimg1 2s infinite cubic-bezier(0,0,1,1),bimg2 2s infinite cubic-bezier(0,1,0,1); width: 10px; height: 10px; position: absolute; background: red; }
用transform: rotate()
cc http://segmentfault.com/q/1010000002951253/a-1020000002951387
http://codepen.io/zzuieliyaoli/pen/EVVGKM
关键是:
transform-origin、transform: rotate();
x轴和y轴的动画分开写,然后两个速度不一样就会形成曲线运动,具体曲线可以通过计算,随便写了个
也可以直接给对应关键帧的x,y值
用transform: rotate()
cc http://segmentfault.com/q/1010000002951253/a-1020000002951387
http://codepen.io/zzuieliyaoli/pen/EVVGKM
关键是:
transform-origin、transform: rotate();