在現代網頁設計中,實現一個動態登錄界面是必不可少的。而其中使用CSS3技術則能讓這個界面變得更加生動。那么今天我們就來看看如何使用CSS3實現動態登錄界面。
login-box { background: #fff; border-radius: 10px; box-shadow: 0 0 10px #000; margin: 50px auto; padding: 30px; width: 350px; } input[type="text"], input[type="password"] { background: #f1f1f1; border: none; border-radius: 3px; margin-bottom: 20px; padding: 10px; width: 100%; } input[type="submit"] { background: #4CAF50; border: none; border-radius: 3px; color: #fff; cursor: pointer; font-size: 16px; margin-top: 20px; padding: 10px; width: 100%; } input[type="submit"]:hover { background-color: #45a049; }
我們首先定義了一個login-box來包含登錄的表單。我們使用了border-radius和box-shadow屬性來讓這個盒子看起來更加美觀。
在輸入框中,我們使用了border:none和padding屬性來清除邊框和添加內邊距。而width:100%讓這個文本框在login-box中占滿整個寬度。
我們還為submit按鈕定義了hover樣式,當鼠標懸停在按鈕上時,它的背景顏色變成粉綠色。
通過以上CSS代碼,我們就能夠實現一個簡單的動態登錄界面了。