Rumah > Soal Jawab > teks badan
CSS3动画,让绝对定位的元素沿圆弧移动,
@keyframes bimg1 {
0% {top: 10%;left: 12%;width:50%;}
30% {top: -10%;left: -12%;width:45%;}
100% {top: 19%;left: 52%;width:40%;}
}
这样写的话,会是线性的移动,从一个点,移动到另外一个点,想要的效果是按圆弧来移动
大家讲道理2017-04-17 11:23:47
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;
}
大家讲道理2017-04-17 11:23:47
http://codepen.io/zzuieliyaoli/pen/EVVGKM
关键是:
transform-origin、transform: rotate();