CSS震动效果

因为之前学习了利用CSStransform实现一个进度条的效果，之后已经过一系列发现其实可以做一个简单的震动放大的效果，

假设设置一个图片标签为BOX1

那么先设置盒子的宽高，插入背景图片，那么这样第一步就完成了。

因为学习过LOVE定律，当Hover的时候图片会产生效果，那么

先把之前的插入的图片opacity设置为0让图片不小时，

继续设定一个高度和宽度

当你点中图片的时候会放大，tranform:scale{1.3 1.3}

这是代表你的图片当点中的时候X轴和Y轴，会同时放大平移，

然后设置渐变时间

transition:all_liner 1s

那么就完成了。

当你点钟图片实际会放大消失，只是因为你设置了渐变时间，渐变的过程是不会消逝的。所以就产生了一个误以为是震动效果，实际图片已经消失

转载于:https://www.cnblogs.com/qingyijie/p/8094695.html