CSS3移動端的設計案例越來越受到設計師和開發者的關注。CSS3作為一種新的Web標準，已經成為前端開發過程中無法替代的重要工具之一。下面我們就來看看一些酷炫的CSS3移動端案例。

.box{
width: 100px;
height: 100px;
background-color: #f00;
border-radius: 50%;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

上面的案例是一個簡單的旋轉動畫，使用了CSS3的關鍵幀動畫（@keyframes），實現了一個永不停息的旋轉效果。通過使用CSS3的動畫特性，我們可以大大降低使用JavaScript實現動畫效果的難度和復雜度。

.box{
background: linear-gradient(270deg, #3399ff 0%, #ff3399 100%);
background-size: 400% 400%;
animation: rainbow 3s ease infinite;
}
@keyframes rainbow{
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}

下面這個案例是一個彩虹漸變動畫，同樣使用了CSS3的關鍵幀動畫實現。該動畫首先定義了一個背景漸變，同時通過線性漸變渲染方式（linear-gradient）實現了較為寬廣的色彩范圍。然后定義了一個動畫（animation），用于讓漸變效果進行左右來回動畫播放。通過此類案例的學習，我們可以深入領悟CSS3的各項優雅的設計特性，為網頁和移動端提供更為精美的視覺效果。