在這里就簡單的放了一張圖片。來說明hover生硬的問題。現在來看，第一個代碼可以實現放大縮小了。但是問題隨之來了。體驗太差了。這不是我想要的。。。。改進

<style>
　　img {
　　　　width: 100px;
　　　　height: 100px;
　　　　/*border-radius: 50%;
　　　　margin-left: 45%;
　　　　margin-top: 10%;*/
　　}

　　img:hover {
　　　　/*放大圖片1.3表示放大的倍數*/
　　　　transform: scale(1.3, 1.3);
　　}

</style>
<img src="img/bizhi.jpg" />

改進后效果好了一點，當鼠標獲取到圖片的焦點時，有了動畫效果。但是問題又來了。。。。。失去焦點時太難看了。。。。改進

<style>
　　img {
　　　　width: 100px;
　　　　height: 100px;
　　　　/*border-radius: 50%;
　　　　margin-left: 45%;
　　　　margin-top: 10%;*/
　　}
　　img:hover {
　　　　/*放大圖片1.3表示放大的倍數*/
　　　　transform: scale(1.3, 1.3);
　　　　/*在hover里面加上效果完成的時間*/
　　　　transition: all 0.5s linear;
　　}
</style>
<img src="img/bizhi.jpg" />

?

最后問題解決了。我們應該在變化的元素上加上和hover里面一樣的效果。才能在失去焦點時繼續完成動畫。。。。

<style>
　　img {
　　　　width: 100px;
　　　　height: 100px;
　　　　/*border-radius: 50%;
　　　　margin-left: 45%;
　　　　margin-top: 10%;*/
　　　　transition: all 0.5s linear;
　　}
　　img:hover {
　　　　/*放大圖片1.3表示放大的倍數*/
　　　　transform: scale(1.3, 1.3);
　　　　/*在hover里面加上效果完成的時間*/
　　　　transition: all 0.5s linear;
　　}

</style>
　　<img src="img/bizhi.jpg" />

轉載于:https://www.cnblogs.com/12kk/p/7661626.html

總結

以上是生活随笔為你收集整理的CSS解决hover选择器生硬效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。