css3炫酷登录页面

1.效果示例

2.html代码

<form class="box" action="" method="post">
<h1>后台登陆</h1>
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="button" name="btn" value="登陆">
</form>

3.css代码

             body {
                                margin: 0;
                                padding: 0;
                                font-family: sans-serif;
                                background: #34495e;
                        }

                        .box {
                                width: 300px;
                                padding: 40px;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                background: #191919;
                                border-radius: 20px;
                                opacity: 0.8;
                        }

                        .box h1 {
                                color: white;
                                text-transform: uppercase;
                                font-weight: 500;
                        }

                        .box input[type=\'text\'],
                        .box input[type=\'password\'] {
                                border: 0;
                                background: none;
                                display: block;
                                margin: 20px auto;
                                text-align: center;
                                border: 2px solid #3498db;
                                padding: 14px 10px;
                                width: 200px;
                                outline: none;
                                color: white;
                                border-radius: 24px;
                                transition: 0.25s;
                        }

                        .box input[type=\'text\']:focus {
                                width: 280px;
                                border-color: #2ecc71;
                        }

                        .box input[type=\'password\']:focus {
                                width: 280px;
                                border-color: #2ecc71;
                        }

                        .box input[type=\'button\'] {
                                border: 0;
                                background: none;
                                display: block;
                                margin: 20px auto;
                                text-align: center;
                                border: 2px solid #2ECC71;
                                padding: 14px 40px;
                                outline: none;
                                color: white;
                                border-radius: 24px;
                                transition: 0.25s;
                                cursor: pointer;
                        }

                        .box input[type="button"]:hover {
                                background: #2ecc71;
                        }