使用 css3 实现小球上下弹跳的动画

香菊网 发表于: 2019-04-24 分类: css  H5部分  前端front  HTML&CSS  

用几行简单的css代码实现上下跳动的效果:

原理是使用 @keyframes 规则来创建动画  css3动画的贝兹曲线来完成这些特效。物体受重力的效果是一种非常复杂的动画过程,我们可以使用CSS来模拟这一效果。

典型的重力效果是小球的弹跳效果。小球受重力和自身弹力的影响不停的上下弹跳。使用CSS制作这个效果其实并不复杂。小球的HTML结构使用一个空的

div 部分

<div class"cicle">
 <img src=".../qiu.png"/>
</div>

css 动画部分

@keyframes hearttop {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-30px);
  } 
}

css 分类

  .arrIcon {
    position: absolute;
    width: 26px;
    height: 26px;
    animation: hearttop 700ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
  }

animation: hearttop 700ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;

参数: hearttop 引用的动画 700ms 动画执行的时间 cubic-bezier(0.165, 0.84, 0.44, 1)  动画执行的曲线图 infinite 无限循环

        alternate  属性定义是否应该轮流反向播放动画。动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放

标签: cssH5部分前端frontHTML&CSS
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮