CSS3遮罩放大是一種比較炫酷的效果，可以用來實現圖片放大等效果。本文將介紹如何使用CSS3實現遮罩放大效果。 首先，我們需要創建一個含有圖片的標簽，例如：

接下來，我們需要給圖片添加遮罩層。我們可以使用偽類:before或:after來實現。 .picture:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); opacity: 0; transition: opacity .3s ease-in; } 上述代碼中，我們使用了rgba顏色來創建半透明的遮罩層，同時設置了opacity為0，讓遮罩層最初是隱藏狀態。我們還添加了一個過渡效果，讓遮罩層的出現和消失更加平滑。 接下來，我們需要添加一個鼠標懸浮時的效果，這時我們需要把遮罩層的opacity設置為1，這樣遮罩層就能顯示出來了： .picture:hover:before { opacity: 1; } 然后，我們需要將圖片進行放大，在此之前，我們需要先把圖片設置為opacity:0，這樣圖片就不會在沒有觸發鼠標懸浮事件時出現。代碼如下： .picture img { opacity: 0; transition: opacity .3s ease-in; } 這時，當鼠標懸浮在圖片上時，圖片和遮罩層同時出現，并且同時進行放大： .picture:hover:before { opacity: 1; } .picture:hover img { opacity: 1; transform: scale(1.1); } 以上代碼中，我們對圖片設置了transform: scale(1.1)，將其放大了10%。 完整代碼如下：

總之，CSS3遮罩放大是一種非常有用的效果，在網頁設計中能夠給用戶帶來更好的體驗。