在現代網頁設計中，一個好看的登錄頁面是非常重要的。CSS可以幫助我們實現各種各樣的效果，從而讓我們的登錄頁面更加美觀。

/* 首先，我們需要創建一個登錄表單 */
form {
width: 300px;
margin: 0 auto; /* 讓表單居中 */
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"],
input[type="password"] {
display: block;
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
margin-bottom: 20px;
box-sizing: border-box;
}
button[type="submit"] {
background-color: #0099FF;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
button[type="submit"]:hover {
background-color: #0066CC;
color: #fff;
}
/* 然后，我們可以添加一些裝飾性的元素 */
body {
background-color: #f2f2f2;
}
h1 {
text-align: center;
font-family: Arial, sans-serif;
color: #333;
margin-top: 50px;
}
.container {
width: 500px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
/* 最后，我們可以為表單添加一些動畫效果 */
input[type="text"],
input[type="password"],
button[type="submit"] {
transition: all 0.3s ease;
opacity: 0;
transform: translateY(-20px);
}
input[type="text"]:nth-child(1) {
transition-delay: 0.2s;
}
input[type="text"]:nth-child(2) {
transition-delay: 0.3s;
}
button[type="submit"] {
transition-delay: 0.4s;
}
.container.show {
opacity: 1;
}
.container.show input[type="text"],
.container.show input[type="password"],
.container.show button[type="submit"] {
opacity: 1;
transform: translateY(0px);
}

通過以上代碼，我們可以創建一個漂亮的登錄頁面。當用戶打開頁面時，表單將會以動畫的方式出現，并呈現出良好的交互效果。