84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
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();