CSS是一種用于網頁設計的語言,能夠控制網頁的樣式和布局。其中一種常見的應用就是在圖片上使用鼠標懸停效果,使其放大并夾帶動畫。
/* 指定鼠標經過時圖片的樣式 */ img:hover { transform: scale(1.1); /* 圖片放大1.1倍 */ transition: all 0.3s ease; /* 動畫效果持續0.3秒 */ }
在上面的代碼中,我們使用偽類:hover指定了鼠標懸停在圖片上時要進行的樣式變化。我們將圖像的大小通過transform屬性擴大了1.1倍,并指定了一個過渡動畫,這樣在鼠標離開圖片時,圖片會平滑地回到原始大小,而不是突然縮小。
嘗試使用上述CSS代碼在你的網站上實現鼠標懸停效果,看看它有什么效果吧!
上一篇css圖片高度自動換行
下一篇python監視某個函數