以下是一個關(guān)于使用CSS實現(xiàn)圖片漸漸放大的代碼,實現(xiàn)效果是鼠標懸停在圖片上時,圖片會漸漸放大。
首先,在HTML中放置一張圖片:
鼠標懸停在下面的圖片上時,圖片會漸漸放大:
<div class="image"> <img src="image.jpg" alt="圖片"> </div>然后,在CSS中設(shè)置圖片容器的樣式并使用`transform`屬性實現(xiàn)漸漸放大的效果:
.image { overflow: hidden; /* 隱藏圖片溢出部分 */ display: inline-block; /* 圖片容器為行內(nèi)塊元素 */ } .image img { transition: transform .3s ease; /* 設(shè)置移動過渡效果 */ } .image:hover img { transform: scale(1.2); /* 懸停時將圖片放大到120% */ }代碼的效果是通過`transform`的`scale`屬性實現(xiàn)圖片的縮放,當懸停在圖片上時,設(shè)置圖片的縮放為120%。 `transition`屬性控制縮放的效果,其中,`.3s`設(shè)置了縮放過渡效果的時長為0.3秒,`ease`設(shè)置了縮放過渡效果的速度曲線為緩入緩出。由于圖片容器使用了`overflow: hidden`,所以圖片縮放到120%時,自動隱藏在容器外部的部分。