在網站開發中，一個優秀的登錄頁面往往能夠讓用戶留下更好的印象，提高用戶體驗。其中登錄效果動畫是一個重要的組成部分，它可以增強用戶的互動體驗和視覺效果，極大地提高頁面的吸引力。下面我們來介紹如何利用CSS3實現登錄效果動畫。

.login {
position: relative;
width: 400px;
margin: 100px auto;
}
.login input {
width: 100%;
height: 50px;
margin-bottom: 20px;
padding: 10px;
border: none;
border-radius: 5px;
}
.login button {
width: 100%;
height: 50px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #4285F4;
color: #fff;
font-size: 20px;
transition: all .3s;
}
.login button:hover {
background-color: #3367D6;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.loading:before,
.loading:after {
content: "";
display: block;
width: 15px;
height: 15px;
border-radius: 100%;
background-color: #4285F4;
position: absolute;
}
.loading:before {
top: 0;
left: 0;
animation: ball-move 1s infinite;
}
.loading:after {
top: 0;
right: 0;
animation: ball-move 1s infinite .2s;
}
@keyframes ball-move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(80px);
}
100% {
transform: translateX(0);
}
}

上面是一段CSS代碼，其中我們的登錄表單使用一個class為“login”的div包裹，并設置一些基本樣式來美化登錄框。當用戶點擊登錄按鈕時，我們可以實現一個動畫效果，增加用戶的體驗。為此我們可以新建一個類名為“loading”的div，并設定其在父級div中水平垂直居中。我們還需要為“loading”中的兩個圓球設置樣式，使其能夠實現運動效果。

上述代碼中的關鍵點是通過關鍵幀動畫來實現兩個球形元素的運動效果。其中設置運動時長為1s，并在不同的時間節點添加“transform: translateX()”來改變元素的位置，從而實現兩球之間的運動效果。

通過上面的代碼，我們成功實現了登錄效果的動畫效果。當用戶點擊登錄按鈕時，該按鈕便會被替換成一個“loading”的div，用戶可知道登錄正在進行中。當登錄結束時，“loading”會消失，登錄按鈕又會出現在原來的位置上，提高了頁面的交互性和視覺效果。