因为之前学习了利用CSStransform实现一个进度条的效果,之后已经过一系列发现其实可以做一个简单的震动放大的效果,
假设设置一个图片标签为BOX1
那么先设置盒子的宽高,插入背景图片,那么这样第一步就完成了。
因为学习过LOVE定律,当Hover的时候图片会产生效果,那么
先把之前的插入的图片opacity设置为0让图片不小时,
继续设定一个高度和宽度
当你点中图片的时候会放大,tranform:scale{1.3 1.3}
这是代表你的图片当点中的时候X轴和Y轴,会同时放大平移,
然后设置渐变时间
transition:all_liner 1s
那么就完成了。
当你点钟图片实际会放大消失,只是因为你设置了渐变时间,渐变的过程是不会消逝的。所以就产生了一个误以为是震动效果,实际图片已经消失