body { margin:0; padding:0; font-family:sans-serif; background:url('https://images.unsplash.com/photo-1629045198199-555766a7e49f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2113&q=80'); } .box { width:300px; padding:40px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#19191900; text-align:center; box-shadow:20px 25px 45px 15px; } .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,.box input[type = "password"]:focus { width:280px; border-color:#2ecc71; } .box input[type = "submit"] { /* 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 = "submit"]:hover { background:#2ecc71; }
更新时间:2021-08-25 02:17:27
css登录页面,基于input的美化和动画