纯css实现半透明的登录页效果
纯 css 实现半透明的登录页效果,时间匆匆,有很多地方还需要完善,该登入界面只涉及 HTML 和 CSS,暂时不涉及 javascript;下来看一下效果图
HTML 代码
<div class="bg-div"></div> <div class="signin"> <img class="user-avater" src="img/user-4.png" /> <div class="box"> <form class="signin-form" method="post"> <div> <input class="form-control form-input" placeholder="用户名" type="text" name="name" /> </div> <div class="" style="margin: 20px 0;"> <input class="form-control form-input" placeholder="密 码" type="password" name="password" /> </div> <div class="save-div"> <input type="checkbox" class="save-checkbox" checked/> <span class="save-pass">记住密码</span> <span class="save-text">* 密码将保存一天</span> </div> <input type="submit" class="btn btn-primary btn-submit" value="登 录"> <span class="signup">还没有账户,立即<a class="signup-a" href="#">注册</a></span> </form> </div> </div>
Css 样式
html, body { height: 100%; margin: 0; padding: 0; } .bg-div { /*background: url(img/bg2.jpg) center;*/ background: blue; width: 100%; height: 100%; position: fixed; top: 0; left: 0; } .signin { width: 100%; height: 100%; text-align: center; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; } .user-avater { border-radius: 50%; border: 4px solid #fff; } .box { width: 400px; color: #666; text-align: center; margin-top: 30px; margin-bottom: 100px; border-radius: 4px; border: 2px solid rgba(255, 255, 255, 0.2); border-top: 0; position: relative; } .box::after { content: ''; display: block; width: 40px; height: 40px; position: absolute; top: -20px; left: 50%; margin-left: -21px; border-top-left-radius: 4px; border-left: 2px solid rgba(255, 255, 255, 0.3); border-top: 2px solid rgba(255, 255, 255, 0.3); transform: rotate(45deg); box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .box::before { content: ''; display: block; width: 400px; height: 2px; position: absolute; /* margin: -199px 199px; */ border-top-left-radius: 4px; /* transform: rotate(90deg); */ box-shadow: inset 171px 0 0 0 rgba(255, 255, 255, 0.2), inset -171px 0 0 0 rgba(255, 255, 255, 0.2); } .signin-form { height: calc(100% - 40px); padding: 20px; } .btn { color: #fff; display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 13px; line-height: 1.42857143; border-radius: 0px; -webkit-user-select: none; } .btn-submit { width: 360px; height: 40px; background-color: #3B89F5; border-color: #3B89F5; margin-top: 20px; } .btn-submit:hover { color: #fff; background-color: #0C6CED; border-color: #0C6CED; text-decoration: none; } input::-webkit-input-placeholder { color: #242424; } /*去除自动填充黄色背景*/ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition-delay: 9999s; -webkit-transition: color 9999s ease-out, background-color 9999s ease-out; } .form-control { display: block; width: 100%; height: 40px; padding: 6px 12px; font-size: 15px; line-height: 1.42857143; color: #fff; box-sizing: border-box; } .form-control:focus { border-color: rgba(59, 137, 245, 0.5); outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(59, 137, 245, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(59, 137, 245, 0.6); } .form-input { background: transparent; border: 2px solid rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.2), 0 0 4px rgba(255, 255, 255, 0.2); -webkit-box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.2), 0 0 4px rgba(255, 255, 255, 0.2); } .save-div { color: #fff; font-weight: bold; } .save-checkbox { float: left; } .save-pass { float: left; } .save-text { float: right; color: #DD4B39; } .signup { font-weight: 400; font-size: 13px; color: #fff; margin-top: 8px; display: block; } .signup-a { color: #468BEA; font-weight: bold; }
以上就是纯 css 实现的半透明登录页效果的全部代码,欢迎转载,转载请留下原文链接,谢谢!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 纯css实现半透明的登录页效果
码云笔记 » 纯css实现半透明的登录页效果