HTML帶動畫登錄代碼
<!DOCTYPE html>
<html>
<head>
<title>登錄頁面</title>
<style>
body {
background-color: #F2F2F2;
}
h1 {
font-size: 28px;
font-weight: bold;
color: #2F4F4F;
margin-bottom: 10px;
}
form {
width: 400px;
margin: 0 auto;
background-color: #FFF;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
animation-name: login;
animation-duration: 1s;
animation-fill-mode: forwards;
}
input[type="text"], input[type="password"] {
width: 100%;
height: 40px;
font-size: 18px;
border-radius: 5px;
border: 1px solid #D3D3D3;
margin-bottom: 20px;
padding: 10px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #2F4F4F;
color: #FFF;
font-size: 18px;
font-weight: bold;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
animation-name: login-btn;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes login {
from {
transform: translateY(-300px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes login-btn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<form>
<h1>用戶登錄</h1>
<input type="text" name="username" placeholder="用戶名"/>
<input type="password" name="password" placeholder="密碼"/>
<input type="submit" value="登錄"/>
</form>
</body>
</html>代碼解析
1. background-color：設置整個頁面的背景顏色； 2. font-size：設置字體大小； 3. font-weight：設置文字的粗細程度； 4. color：設置文字顏色； 5. margin-bottom：設置下邊距； 6. width、height：設置元素的寬度和高度； 7. border-radius：設置元素的邊框弧度； 8. border：設置元素的邊框樣式； 9. padding：設置內邊距； 10. box-sizing：設置元素盒模型的初始寬度和高度； 11. animation-name：設置動畫名稱； 12. animation-duration：設置動畫持續時間； 13. animation-fill-mode：設置動畫結束后元素的樣式； 14. transform：設置元素的平移、旋轉、縮放等效果； 15. opacity：設置元素的不透明度。
效果演示
上一篇go 返回json對象
下一篇python 輸入一組