效果图
页面结构
页面结构很简单，我们这里只需要将
#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); } }
代码我放到码上掘金上了，感兴趣的大家可以看一下！
