登录

css3怎么能做到弧形的运动轨迹

因为想做花瓣掉落的逼真样子
现在只是在中间点加上了一个断点 但是运动的非常生硬
怎么能用css3 keyfames 做出那种弧形的运动轨迹
得到帮助非常感谢

# CSS3
扔个三星炸死你 扔个三星炸死你 2462 天前 1770 次浏览

全部回复(3) 我要回复

  • 三叔

    三叔2017-07-01 09:14:22

    应该能,不过需要计算下,变化的参数

    回复
    0
  • 某草草

    某草草2017-07-01 09:14:22

    我做过一个金币掉落的效果
    我的动画这么写的

    @keyframes drop
        0%
          transform: translate(0,0) rotate3d(0,1,0,0deg)
        33%
          transform: translate(-20px,245px) rotate3d(0,1,0,-60deg)
        66%
          transform: translate(20px,490px) rotate3d(0,1,0,60deg)
        100%
          transform: translate(0,736px) rotate3d(0,1,0,0deg)
      @keyframes drop2
        0%
          transform: translate(0,0) rotate3d(1,0,0,0deg)
        33%
          transform: translate(20px,245px) rotate3d(1,0,0,60deg)
        66%
          transform: translate(-20px,490px) rotate3d(1,0,0,-60deg)
        100%
          transform: translate(0,736px) rotate3d(1,0,0,0deg)

    回复
    0
  • 巴扎黑

    巴扎黑2017-07-01 09:14:22

    曲线的时间参数,横着匀速,竖着变速。或者反过来,能模拟出曲线时间参数

    回复
    0
  • 取消 回复 发送