現在的網站登錄頁面越來越酷炫了，很多網站都采用了CSS3來制作登錄頁面。CSS3是一種比CSS2更加強大和靈活的樣式表技術，可以實現更加豐富和炫酷的效果。

下面我們就來看一個采用CSS3制作的登錄頁面的示例代碼：

/* 主要樣式 */
.login-box {
width: 300px;
height: 320px;
background-color: #fff;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -160px;
margin-left: -150px;
box-shadow: 0 0 10px #aaa;
}
.login-box h2 {
text-align: center;
font-size: 24px;
margin-top: 20px;
margin-bottom: 20px;
}
.login-box input[type="text"], 
.login-box input[type="password"] {
width: 100%;
height: 36px;
padding: 8px;
margin-top: 10px;
margin-bottom: 10px;
border: none;
border-radius: 3px;
box-shadow: 0 0 3px #aaa;
outline: none;
}
.login-box input[type="submit"] {
width: 100%;
height: 40px;
border: none;
border-radius: 3px;
font-size: 16px;
color: #fff;
background-color: #ff6600;
cursor: pointer;
box-shadow: 0 0 3px #aaa;
}
.login-box input[type="submit"]:hover {
background-color: #ffa366;
}
.login-box input[type="submit"]:active, 
.login-box input[type="submit"]:focus {
background-color: #e65c00;
}
/* 下面是一些動畫效果 */
.login-box input[type="text"]:focus, 
.login-box input[type="password"]:focus {
transform: scale(1.1);
box-shadow: 0 0 10px #aaa;
}
.login-box input[type="submit"]:hover, 
.login-box input[type="submit"]:focus {
transform: translateY(-3px);
box-shadow: 0 3px 3px #aaa;
}

在這個示例代碼中，我們使用了幾個比較常見的CSS3屬性：

• border-radius：用于設置圓角；
• box-shadow：用于設置陰影；
• transform：用于設置變形效果；
• cursor：用于設置鼠標指針的樣式。

有了這些屬性的支持，我們就可以輕松地制作出一個酷炫的登錄頁面了。當然，還有很多其他的CSS3屬性可以用來制作更加豐富和炫酷的效果，有興趣的讀者可以自行了解。