CSS 動畫可以為網頁添加生動活潑的效果，其中圖片開合特效是其中一種常見的動畫。本文將介紹如何實現CSS圖片開合特效。

// HTML 代碼
<div class="container">
<img src="example.jpg" class="image">
<div class="overlay"></div>
</div>
// CSS 代碼
.container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: black;
opacity: 0.6;
transition: width 0.5s ease-out;
}
.container:hover .overlay {
width: 100%;
}

我們先在HTML中添加一個包裹圖片的容器，并使用CSS中的overflow:hidden將其盒子設置具有溢出塊限制的屬性。然后再為圖片設置100%的寬高，以使其填滿容器。

接下來就可以設置遮罩層，其定位方式為絕對定位，寬度由0漸變到100%。經過CSS中的:hover偽類選擇器觸發的寬度漸變屬性，即可實現鼠標滑過圖片時遮罩層的漸變效果。

以上就是使用CSS實現圖片開合特效的方法。通過其簡單的代碼來為網頁添加動態效果，不僅可以使網頁更加生動活潑，還可以提高用戶體驗，增強網頁吸引力。