HTML5CSS3特效-上下跳动的小球

(-1)写在前面

   我用的是chrome49，这个idea是我在stackoverflow上回答问题时看到了，多谢这位同行，加深了我对很多技术点的理解，最近刚到北京，忙碌了一两天，在后续的日子里，会被安排面试，学习计划只能按工作流走了，做完这个要看一个特别酷的效果，好激动!

(0)效果演示

（1）实现方案

动画效果都是用animation做的

（2）知识点详解

a. border-radius:40px;  

当div的长高都是80px的时候，div是一个圆形，其实长高都是60px的时候也是圆型，同理都是40、30也是圆型，当然案例中没有使用这种方式。具体实现在代码中说明

b. position:absolute;

当div使用此属性时，margin：0 auto是无效的，小球使用了这个属性，他的水平居中的实现方式在代码中说明

立即学习“前端免费学习笔记（深入）”；

c. animation:down 1.5s infinite alternate;

I.1.5s 是动画的持续时间，因为延迟时间出现在持续时间的后面，所以只出现一个带s的参数是持续时间。

II.这里的alternate是指反向播放动画，比如说一个动画的帧如下

@keyframes down{      from{  …}      95%      {           …      }      to      {           …}     }

登录后复制

正向播放是from-95-to,反向播放to-95%-from

d. @keyframes down{95%{…}}

如果对应animate：down 1.5s;

动画在执行到95%就到达了最终状态，剩余5%的时间会用在回到初始状态。

(3)代码加解释

nbsp;html>*{      margin:0;      padding:0;}#lol{      margin:0px auto;      top:100px;      width:80px;      height:80px;      background-color:red;      border-radius:40px;                  position:absolute;      left:160px;      animation:down 1.5s infinite alternate;}   @keyframes down{      95%      {           width:15px;           height:15px;           border-radius:7.5px; /*保证div始终是个圆形*/           top:300px;           left:192.5px;/*保证小球始终水平居中*/           background:blue;      }}#frame{      width:400px;      height:315px;      margin:100px auto;      border:1px red solid;      position:relative;}#head{      width:400px;      height:100px;      text-align:center;      font-size:40px;      font-weight:bold;      line-height:100px;      background-image:-webkit-linear-gradient(90deg, #be1e1e, #be9b1e, #1ebe21, #1ebeb5, #1e24be, #ba1ebe, #be1e1e);/*前面文章有提到*/      -webkit-background-clip: text;/*剪切背景颜色，只在文字上显示*/      -webkit-text-fill-color:transparent;/*文字填充为透明色*/      background-size:100% 700%;    /*前面文章有提到*/      animation:bc 6s infinite;}@keyframes bc{      to      {           background-position:100% 100%;/*前面文章有提到*/      }}          
           
Animatiom
           
      
              

登录后复制