这是一个只有一个div制作的小动画，纯CSS3动画完成，就像一个正方形在地上弹跳，碰到地面的时候尖角会被压缩变圆，阴影部分也会随着正方形的上升而缩小。至于如何完成？让我们继续阅读。使用伪元素由于只使用了一个div，要同时实现正方形旋转和阴影缩放的效果，必须使用两个伪元素（before和after）来完成。严格来说，虽然只有一个div，但正是这个div充当了frame，before伪元素充当了旋转的正方形，after伪元素充当了阴影。.box{position:relative;}.box:before{content:'';位置：绝对；z-索引：2；顶部：60px；左：50px；宽度：50px；高度：50px；背景：#c00；-半径：2px；变换：旋转（45度）；}.box：之后{内容：''；位置：绝对；z-索引：1；顶部：128px；左：52px；宽度：44px；高度：3px；：#eaeaea;border-radius:100%;}CSS动画绘制完正方形和阴影之后，接下来就是做动画了。为了避免过于复杂，这里我们先不旋转，让方块上下跳动，然后影子会Zoomin和zoomout。在下面示例的动画中，添加了20%和80%的关键帧。目的是使角接触时变圆。否则，尖角在开始移动时会变圆。这会很奇怪。.box:before{内容:'';位置：绝对；z-索引：2；顶部：60px；左：50px；宽度：50px；高度：50px；背景：#c00；边界半径：2px；（45度）；-webkit-animation:box.8sinfinite;}@-webkit-关键帧框{0%{top:50px;}20%{边界半径：2px；/*变形从20%开始*/}50%{top:80px;边框右下角半径：25px；}80%{边界半径：2px；/*在80%处返回到原始形状*/}100%{top:50px;}}.box:after{内容:'';位置：绝对；z-索引：1；顶部：128px；左：52px；宽度：44px；高度：3px；背景：#eaeaea;边界半径：100%；-动画：阴影.8s无限；}@-webkit-keyframes阴影{0%,100%{left:54px;宽度：40px；背景：#eaeaea;}50%{顶部：126px；左：50px；保持阴影在原地*/width:50px;高度：7px；背景：#eee；}}添加旋转效果明白原理后，我们只需要添加旋转属性就可以实现弹跳时旋转的效果。但是这里还有一个小技巧，就是它下落的时候从90度转为45度，弹起的时候从45度转为0度，此时又从0度转为90度（100%到0%），这样我们就会产生它似乎一直在旋转的错觉。@-webkit-关键帧框{0%{top:50px;变换：旋转（90度）；/**/}20%{边框半径：2px；}50%{顶部：80像素；变换：旋转（45度）；边框右下角半径：25px；}80%{边界半径：2px；}100%{顶部：50像素；变换：旋转（0度）；在另一边弹跳。如果我们给动画加上linear，就会变成线性连续的方法。
