css动画效果

动画1(沿着椭圆转动)

 其实是个2D转动,只不过咱们设置椭圆,然后加上scale缩放(近大远小),看上去就是3D效果

代码:





  
  
  
  动画1



  

  

1. scale去设置的总时间(也就是转一圈用的时间), 这里设置 22秒

2. X轴和Y轴用的时间是一样的,都为总时间的一半,也就是11秒

3. 相差的时间是 总时间/图片的个数  这里也就是 22/11 = 2秒

4.  X轴和Y轴的延时时间相差 11/2 = 5.5秒

可以把代码拷贝过去,修改一下试试就可以啦 

动画2 (旋转木马特效)

 代码:




  
  
  
  动画2


  
  

动画3 (沿X、Y、Z轴自转)




  
  
  
  动画3


  
  

 动画4(点击收缩隐藏)

css动画效果_第1张图片 





  
  
  
  Document



  
  

你可能感兴趣的:(前端,css,前端,css3)