作為現代網站設計中不可或缺的一部分，動畫效果能夠為用戶帶來更加豐富的視覺體驗。而隨著CSS3技術的逐步發展，越來越多令人驚艷的動畫效果在網頁中實現。下面，我們就來看看一些有趣的CSS3動畫效果代碼案例。 首先是一個簡單的展開效果，當鼠標懸停在“查看更多”按鈕上時，將會展開一個卡片，顯示更多內容。該效果使用了CSS3中的transform和transition屬性。 ```

查看更多

.show-more-btn {
background-color: #008CBA;
border: none;
color: white;
cursor: pointer;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 10px;
transition: all 0.3s ease-in-out;
margin: 30px auto;
}
.show-more-btn:hover {
transform: translateY(-10px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

``` 接下來是一個旋轉效果，當鼠標懸停在一個圖標上時，該圖標將會以3D的方式進行旋轉，并且帶有一個陰影效果。該效果使用了CSS3中的perspective、transform和transition等屬性。 ```

.fa-camera-retro {
font-size: 40px;
color: #008CBA;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.fa-camera-retro:hover {
transform: rotateY(360deg);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

``` 最后是一個漸顯效果，當某些元素進入屏幕時，元素將會以漸顯的方式進行展示。該效果使用了CSS3中的opacity和transition等屬性。 ```

這是一個演示漸顯效果的段落。

.fade-in {
opacity: 0;
transition: all 0.5s ease-in-out;
}
.fade-in.is-visible {
opacity: 1;
}

``` 以上就是這幾個CSS3動畫效果代碼案例的介紹，希望大家可以在網站設計中運用這些技巧，為用戶帶來更加出色的視覺體驗。