今天我們來學習一下如何使用CSS實現彈出圖片效果。
首先，我們需要準備一個HTML文檔，其中要包含我們要彈出的圖片和一個按鈕。
```html
```
接下來，我們使用CSS給這個按鈕添加彈出效果。我們可以使用偽類控制按鈕的行為。當按鈕被點擊時，我們希望圖片出現在頁面中心。
```css
button {
border: none;
background-color: #008CBA;
color: #fff;
padding: 10px 20px;
border-radius: 2px;
cursor: pointer;
}
button:focus + img {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 90%;
z-index: 9999;
}
```
在這段代碼中，我們使用了:focus偽類來判斷按鈕何時被點擊。當按鈕被點擊時，它的相鄰元素
![]()
的位置將被重新設置。
我們使用絕對定位將圖片放置在屏幕中心。我們還使用了transform屬性來定位圖片，并使用max-height屬性限制圖片的大小，以避免放大后影響頁面布局。
完成這些步驟后，現在你可以打開你的HTML頁面并點擊按鈕，看看圖片是如何彈出的！
以上就是CSS如何實現彈出圖片的整個過程，希望對你有所幫助。
