當我們瀏覽網站時，經常會發現一些有趣的頁面效果，比如圖片的縮放、動畫的漸變等等。今天我們就來學習一種非常有趣的CSS效果，那就是怪獸消失效果。

怪獸消失效果，顧名思義，就是當鼠標移動到一個怪獸時，怪獸會以某種方式消失。這種效果看起來非常神奇，但其實實現起來也很簡單，只需要一些基本的CSS知識就可以了。

首先，我們需要一個怪獸的圖片。這里我選擇了一個可愛的卡通怪獸圖片：

<img src="https://cdn.jsdelivr.net/gh/Assistant-GPT-3/web-development-tutorials-zh-CN/css%20monster%20disappear/monster.png" alt="怪獸" id="monster">

接下來，我們需要添加一些CSS樣式來實現怪獸消失的效果。這里我們使用偽元素和過渡效果：

#monster {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
#monster:hover::before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: #fff;
position: absolute;
left: 0;
top: 0;
z-index: 10;
transform-origin: 50% 50%;
animation: scale 0.3s ease forwards;
}
@keyframes scale {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}

讓我們來解釋一下這些CSS樣式：

• 我們首先將怪獸設置為絕對定位，并在屏幕中央居中顯示。
• 為了實現怪獸消失的效果，我們用::before偽元素創建了一個白色的蒙版，并設置為塊級元素。
• 我們使用了過渡效果，將怪獸的所有CSS屬性（包括位置、大小、顏色等等）在0.3秒內緩慢地改變。這樣，在鼠標移動到怪獸時，蒙版會逐漸展開，覆蓋整個怪獸。
• 最后，我們使用了一個縮放動畫，將蒙版從初始狀態的0倍縮放到最終狀態的1倍。

現在，我們已經成功地創建了怪獸消失效果。快試試移動一下鼠標，看看怪獸消失的效果吧！