0


html+css唯美登录页面,代码提供(效果展示)

文章目录

效果图

在这里插入图片描述

所有代码

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>登陆页面</title><!-- author xjt --></head><body><divclass="login"><h2>登陆\注册</h2><divclass="login_form"><span>账号:</span><inputtype="text"placeholder="请输入账号"><br><span>密码:</span><inputtype="password"placeholder="请输入密码"></div><divclass="btn"><buttonclass="login_btn"onclick="login()">登 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button></div></div></body><script>functionlogin(){
        console.log('登录按钮点击了');}</script><style>body{padding: 0;margin: 0;height: 100vh;display: flex;justify-content: center;background-image:linear-gradient(#a18cd1 0%, #fbc2eb 100%);background-size: cover;flex: 1;align-items: center;}.login{text-align: center;margin: 0 auto;width: 600px;height: 520px;background-color:rgba(87, 86, 86, 0.2);border-radius: 25px;box-shadow: 5px 2px 35px -7px #ff9a9e;}.login h2{margin-top: 40px;color: aliceblue;font-weight: 100;}.login_form{padding: 20px;}.login_form span{color:rgb(131, 220, 255);font-size: 18px;font-weight: 100;}.login_form input{background-color: transparent;width: 320px;padding: 2px;text-indent: 2px;color: white;font-size: 20px;height: 45px;margin: 30px 30px 30px 5px;outline: none;border: 0;border-bottom: 1px solid rgb(131, 220, 255);}input::placeholder{color: #fbc2eb;font-weight: 100;font-size: 18px;font-style: italic;}.login_btn{background-color:rgba(255, 255, 255, 0.582);border: 1px solid rgb(190, 225, 255);padding: 10px;width: 240px;height: 60px;border-radius: 30px;font-size: 30px;color:rgb(100, 183, 255);font-weight: 100;margin-top: 15px;}.login_btn:hover{box-shadow: 2px 2px 15px 2px rgb(190, 225, 255);background-color: transparent;color: white;/* 选择动画 */animation: login_mation 0.5s;}/* 定义动画 */@keyframes login_mation{from{background-color:rgba(255, 255, 255, 0.582);box-shadow: 0px 0px 15px 2px rgb(190, 225, 255);}to{background-color: transparent;color: white;box-shadow: 2px 2px 15px 2px rgb(190, 225, 255);}}</style></html>
标签: html

本文转载自: https://blog.csdn.net/languageStudent/article/details/123611087
版权归原作者 languageStudents 所有, 如有侵权,请联系我们删除。

“html+css唯美登录页面,代码提供(效果展示)”的评论:

还没有评论