CSS3动画,让元素沿圆弧移动
天蓬老师
天蓬老师 2017-04-17 11:21:47
0
4
728

CSS3动画,让绝对定位的元素沿圆弧移动,

@keyframes bimg1 {
      0% {top: 10%;left: 12%;width:50%;}
      30% {top: -10%;left: -12%;width:45%;}
      100% {top: 19%;left: 52%;width:40%;}
    }
    

这样写的话,会是线性的移动,从一个点,移动到另外一个点,想要的效果是按圆弧来移动

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

répondre à tous(4)
大家讲道理

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;
}
PHPzhong

用transform: rotate()

伊谢尔伦

cc http://segmentfault.com/q/1010000002951253/a-1020000002951387

大家讲道理

http://codepen.io/zzuieliyaoli/pen/EVVGKM

关键是:

transform-origin、transform: rotate();

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal