HTML登錄界面是一個網站必不可少的組成部分，為網站提供用戶管理、權限分配以及數據保護等功能。下面是一些HTML登錄界面代碼的大全。

1. 最簡單的登錄界面

<form>
<label>用戶名：<input type="text" name="username"></label>
<label>密碼：<input type="password" name="password"></label>
<button type="submit">登錄</button>
</form>

2. 添加圖標和邊框樣式的登錄界面

<form>
<label>用戶名：<input type="text" name="username"></label>
<label>密碼：<input type="password" name="password"></label>
<button type="submit">登錄</button>
</form>
<style>
form{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px #ccc;
padding: 20px;
}
label{
display: block;
margin-bottom: 10px;
}
input{
padding: 5px;
border: none;
border-bottom: 1px solid #ccc;
margin-left: 10px;
}
button{
padding: 10px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
margin: 20px 0 0 0;
}
</style>

3. 添加動畫效果的登錄界面

<form>
<label>用戶名：<input type="text" name="username"></label>
<label>密碼：<input type="password" name="password"></label>
<button type="submit">登錄</button>
</form>
<style>
form{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px #ccc;
padding: 20px;
position: relative;
}
form:before{
content: "";
position: absolute;
top: -1.5em;
left: -1.5em;
right: -1.5em;
bottom: -1.5em;
background: linear-gradient(120deg, #2980B9, #8E44AD);
z-index: -1;
border-radius: 50%;
animation: floating 3s ease-in-out infinite;
}
label{
display: block;
margin-bottom: 10px;
}
input{
padding: 5px;
border: none;
border-bottom: 1px solid #ccc;
margin-left: 10px;
}
button{
padding: 10px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
margin: 20px 0 0 0;
transition: transform 0.3s ease-in-out;
}
button:hover{
transform: scale(1.2);
}
@keyframes floating{
0%{
transform: scale(0.6) translate(0, 0);
}
50%{
transform: scale(1.1) translate(0, -20px);
}
100%{
transform: scale(0.6) translate(0, 0);
}
}
</style>

這些HTML登錄界面代碼可以根據實際需要進行修改和優化，以達到更好的用戶體驗和界面效果。