CSS震动效果


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

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

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

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

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

继续设定一个高度和宽度

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

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

然后设置渐变时间

transition:all_liner 1s

那么就完成了。

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM