由於hover偽類添加的動畫效果，僅當滑鼠放在元素上時會被觸發，而當滑鼠離開時，效果會中斷，會顯得很生硬。
大多數人的想法都是使用js的onmouseover和onmouseleave事件來實現動畫效果。其實不必這麼麻煩，CSS3便可以幫你解決這些問題。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>離開時效果生硬</title> <style type="text/css"> p{ width: 100px; height: 100px; border:1px solid; margin:0px auto; margin-top: 200px; } p:hover{ transform: scale(2); transition: all 1s linear; } </style> </head> <body> <p></p> </body> </html>
由於p元素只有在:hover偽類觸發的時候，效果才能加到p元素上。
當滑鼠離開p元素的時候，:hover偽類將不再生效，瞬間丟掉hover裡寫的動畫效果。
此時，我們應當在原本元素上再寫一個一模一樣的transition效果，將離開斷掉的動畫效果續接上。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>簡單解決</title> <style type="text/css"> p{ width: 100px; height: 100px; border:1px solid; margin:0px auto; margin-top: 200px; /* 在原本元素上再加一個transition */ transition: all 1s linear; } p:hover{ transform: scale(2); transition: all 1s linear; } </style></head><body> <p></p></body></html>
此時，不管滑鼠在什麼時候離開元素，都會原樣返回。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
你不知道的冷門CSS屬性
href和src、link和@import有什麼區別
css的絕對位置怎麼相容所有的解析度
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
