CSS3 最小化效果
CSS3擁有許多強大的特性，其中之一就是最小化效果。最小化被定義為在點擊或懸停在文本或圖標上時，將其縮小并在其中心動畫。這種效果可以使網站在視覺上更加動態和有趣。在本文中，我們將學習如何實現這種效果。
首先，我們需要寫一個HTML元素，例如一個按鈕。可以在按鈕中包含一些文本，也可以使用圖標。代碼如下：
```
在這里放置一些文本。
``` 接下來，我們可以使用CSS來為按鈕添加最小化效果。我們將使用transform和transition屬性。代碼如下： ``` button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; position: relative; overflow: hidden; } button::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 200px; height: 200px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; transition: transform 0.5s ease-in-out; z-index: -1; } button:hover::before, button:focus::before { transform: translate(-50%, -50%) scale(1); } ``` 我們使用偽元素::before為按鈕添加一個圓形白色背景，并通過transform屬性將其縮小，以及使用transition屬性控制動畫效果。當使用:hover或:focus偽類選擇器時，我們將transform屬性的值修改為1，從而實現最小化的效果。 使用CSS3最小化效果可以使我們的網站更加生動和富有動感。它可以用于各種不同的CSS元素，例如文本、圖標以及按鈕等。在設計網站時，通過添加最小化效果，可以使您的網站與眾不同并吸引更多的用戶。 要查看完整的CSS3最小化效果示例，請訪問以下鏈接：https://codepen.io/thecodercoder/pen/KKbLKey ___________________________ 代碼使用pre標簽button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: relative;
overflow: hidden;
}
button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
transition: transform 0.5s ease-in-out;
z-index: -1;
}
button:hover::before, button:focus::before {
transform: translate(-50%, -50%) scale(1);
}