Rumah  >  Soal Jawab  >  teks badan

CSS3动画,让元素沿圆弧移动

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

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

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

天蓬老师天蓬老师2764 hari yang lalu718

membalas semua(4)saya akan balas

  • 大家讲道理

    大家讲道理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;
    }

    balas
    0
  • PHPz

    PHPz2017-04-17 11:23:47

    用transform: rotate()

    balas
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:23:47

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

    balas
    0
  • 大家讲道理

    大家讲道理2017-04-17 11:23:47

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

    关键是:

    transform-origin、transform: rotate();

    balas
    0
  • Batalbalas