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