HTML + CSS实现动态背景的登录效果

最新推荐文章于 2024-06-20 23:28:37 发布

Training.L

最新推荐文章于 2024-06-20 23:28:37 发布

阅读量5.2k

点赞数 6

文章标签： html css

本文链接：https://blog.csdn.net/qq_41775769/article/details/105797127

版权

一、动态背景的登录效果图

在这里插入图片描述

由于背景是在不断的切换的，就不一一截图展示啦。

二、文件结构展示

在这里插入图片描述

三、源码区

1.html文档(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/login.css">
    <title>用户登录</title>
</head>
<body data-vide-bg="./hubu.mp4">
    <div class="login-form">
        <h2>Login</h2>
        <div class="form-input">
            <input type="text" name="" placeholder="用户名">
        </div>
        <div class="form-input">
            <input type="password" name="" placeholder="密码">
        </div>
        <div class="form-input">
            <input type="submit" name="登录" value="登录">
        </div>
        <a href="#" class="forget">忘记密码?</a>
        <a href="#" class="register">立即注册</a>
    </div>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/jquery.vide.js"></script>
</body>
</html>

2.CSS文档(login.css)

body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background-color: #000;
  font-family: sans-serif;
}
.login-form{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 250px;
  padding: 60px 40px;
  background-color: rgba(255,255,255,.8);
  box-shadow: 0 15px 20px rgba(0,0,0,.2);
  border-radius: 20px;
}
.login-form h2{
  margin: 0 0 40px;
  padding: 0;
  text-align: center;
}
.login-form .form-input{
  position: relative;
  margin: 20px 0;
}
.login-form .form-input input{
  outline: none;
  height: 32px;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  border:1px solid rgba(0,0,0,.5);
  background: transparent;
  font-size: 15px;
  border-radius: 5px;
}
.login-form .form-input input[type='submit']{
  background-color: #e91e63;
  color: #fff;
  border: none;
  height: 40px;
  cursor: pointer;
  vertical-align:middle;
  text-align:center;
}
.login-form .form-input input[type='submit']:hover{
  background-color: #0090ff;
}
.login-form a{
  margin-top: 30px;
  color:#5a6268;
  font-size: 13px;
  font-weight: 700;
  text-decoration-line: none;
}
.login-form .forget {
  color: rgb(170,133,177);
}

.login-form .register {
  color: orangered;
  padding-left:110px;
}

需要配图的小伙伴可以私信我啦…

Training.L

关注

6
点赞
踩
45

收藏

觉得还不错? 一键收藏
7
评论
HTML + CSS实现动态背景的登录效果

一、动态背景的登录效果图由于背景是在不断的切换的，就不一一截图展示啦。二、文件结构展示三、源码区1.html文档(index.html)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont...
复制链接

扫一扫