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