因為之前學習了利用CSStransform實現一個進度條的效果,之后已經過一系列發現其實可以做一個簡單的震動放大的效果,
假設設置一個圖片標簽為BOX1
那么先設置盒子的寬高,插入背景圖片,那么這樣第一步就完成了。
因為學習過LOVE定律,當Hover的時候圖片會產生效果,那么
先把之前的插入的圖片opacity設置為0讓圖片不小時,
繼續設定一個高度和寬度
當你點中圖片的時候會放大,tranform:scale{1.3 1.3}
這是代表你的圖片當點中的時候X軸和Y軸,會同時放大平移,
然后設置漸變時間
transition:all_liner 1s
那么就完成了。
當你點鍾圖片實際會放大消失,只是因為你設置了漸變時間,漸變的過程是不會消逝的。所以就產生了一個誤以為是震動效果,實際圖片已經消失