CSS圖片呈圓形展開是一種非常流行的設(shè)計(jì)風(fēng)格，可以讓頁面看起來更加美觀大氣。下面就讓我們來學(xué)習(xí)一下如何使用CSS來實(shí)現(xiàn)這種效果。

/* HTML代碼 */
<div class="circle">
<img src="img/1.jpg">
</div>
/* CSS代碼 */
.circle {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
}
.circle img {
width: 100%;
height: auto;
transform: scale(0.9);
transition: transform 0.5s ease;
}
.circle:hover img {
transform: scale(1);
}

首先，我們需要在HTML中設(shè)置一個div容器和一張圖片。在CSS中，我們將div容器設(shè)置為圓形，同時設(shè)置其寬高為150px，并將overflow屬性設(shè)置為hidden，這樣可以讓圖片在超出圓形范圍的時候被隱藏。

接著，我們設(shè)置div中的圖片寬度為100%，高度自動調(diào)整，并將其縮小為原來的0.9倍，并添加一個scale變換動畫。當(dāng)鼠標(biāo)懸停在圓形容器上時，我們將圖片的縮放比例變?yōu)?倍，這樣圖片就會呈現(xiàn)出圓形展開的效果。

總的來說，使用CSS實(shí)現(xiàn)圖片呈圓形展開非常簡單，只需要將容器設(shè)置為圓形，設(shè)置overflow屬性為hidden，并設(shè)置圖片的scale屬性即可。如果你想讓頁面看起來更加美觀大氣，建議你使用以上代碼來實(shí)現(xiàn)這種效果！