我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

效果图

页面结构

页面结构很简单，我们这里只需要将#app盒子作为平台，然后再用.ball写出小球的样式在对它添加上弹跳的效果就可以了

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

初始样式

清除所有元素的默认内外边距，将#app盒子占满全屏，以便于小球进行弹跳

      * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 100vw;
            height: 100vh;
            background: #000;
        }

小球实现

我们设置好宽高，再用css圆角属性将小球设置为圆形，小球的仿真效果我们通过css背景radial-gradient属性进行实现，最后给上固定定位，让小球可以全屏进行跳跃，我们到时候通过控制top和left值让小球移动位置

     .ball {
            position: fixed;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle farthest-side at center, white, grey);
        }

小球反弹跳跃实现

小球的反弹跳跃效果我们这里使用CSS动画进行实现，我们这里需要声明两个动画，一个是控制小球的X轴移动，一个是控制小球Y轴移动，我们将小球的top值和left值动画起始值设置为0，动画终止值我们这里需要套入公式，小球的top值为：(页面的高度)-(小球的高度)，小球的left值为：(页面的宽度)-(小球的宽度)，然后使用css的calc属性套入公式进行计算得出小球移动的终止值，最后给小球添加上这两个动画，设置好动画执行时间并开启无限循环和轮流反向播放

  .ball {
            animation: beatX 3s linear infinite alternate,
                beatY 3.5s linear infinite alternate;
        }

   @keyframes beatX {
            from {
                left: 0;
            }
            to {
                left: calc(100vw - 50px);
            }
        }

        @keyframes beatY {
            from {
                top: 0;
            }
            to {
                top: calc(100vh - 50px);
            }
        }

代码我放到码上掘金上了，感兴趣的大家可以看一下！

坚持努力，无惧未来！