CSS3图片跳动效果

分享一个有意思的图片弹跳小动画，效果如下图：

图片跳动效果

因为gif图片问题，投影部分显示会有点小瑕疵，实际效果会比较高清。

下面是案例实现步骤：

第一步：

搭建结构，结构使用ul>li>img布局，并给body设置背景图，投影使用伪元素after实现。

代码如下：

第二步：

书写页面静态效果，给图片设置内边距和背景颜色，并设置投影，底下阴影使用伪元素定位实现。

代码如下：

第三步：

给图片img设置位移和拉伸动画，并且给低部阴影设置缩放和虚化。

代码如下：

最后

完整版代码如下，需要的可以打包走~~~