近年來，隨著Web前端技術的不斷發展，越來越多的網站開始采用動畫效果來提高用戶體驗。CSS3動畫便是其中一種常用的技術。

在網站的登錄頁面中，我們往往能看到各種有趣的CSS3動畫。比如，當用戶輸入錯誤的用戶名或密碼時，登錄按鈕會抖動；當用戶輸入正確信息并點擊登錄按鈕時，頁面會出現進度條等等。

下面，我們就來展示一下如何使用CSS3動畫來實現一個簡潔而又有趣的登錄頁面。

/* 定義一個動畫 */
@keyframes shake {
0% { transform: translateX(0); }
10%, 90% { transform: translateX(-10px); }
20%, 80% { transform: translateX(10px); }
30%, 50%, 70% { transform: translateX(-10px); }
40%, 60% { transform: translateX(10px); }
}
/* 設置登錄按鈕的樣式 */
.submit-btn {
background-color: #f06292;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
animation: shake 0.5s linear;
}

在上面的代碼中，我們首先使用@keyframes關鍵字定義了一個名為shake的動畫。在該動畫中，我們通過不同的時間點改變按鈕的位置，從而實現抖動的效果。

接下來，我們針對提交按鈕（submit-btn）添加了一些樣式。其中，我們將該按鈕的背景色設置為粉色，顏色設置為白色，設置了一些內邊距和圓角邊框。另外，我們還設置了一個“抖動”效果，時長為0.5秒，線性變化方式。

最終，得益于CSS3動畫的優秀性能和出色的效果，我們可以輕松地實現各式各樣的網頁動畫，為用戶帶來更加豐富、有趣的交互體驗。