CSS3弹跳小球运动效果

CSS3弹跳小球运动效果

1. 在body标签中，div.box*3>div.ball+div.shadow

<div class="w1200">

        <div class="box red">

            <div class="ball"></div>

            <div class="shadow"></div>

        </div>

        <div class="box green">

            <div class="ball"></div>

            <div class="shadow"></div>

        </div>

        <div class="box blue">

            <div class="ball"></div>

            <div class="shadow"></div>

        </div>

    </div>

class是引入css

2.css样式
给body标签设置径向渐变body{background-image:radial-gradient(#fff,#ccc);}

设置球样式.ball{

width:100px;

height:100px;
border-radius:50%;

animation:animationBall 1s cubic-bezier(0.17,0.84,0.44,1) infinite;

}

3.设置球的关键帧

      @keyframe