css3怎么能做到弧形的运动轨迹-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

扔个三星炸死你 2017-07-01 09:12:22

[CSS3讨论组]

2132

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

扔个三星炸死你

全部回复(3)

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

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

赞 +0

添加回复

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

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

@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

添加回复