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

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

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

二、文件结构展示

三、源码区

1.html文档(index.html)

"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "stylesheet" href="css/login.css">
    

"./hubu.mp4">
    
"login-form">
        
Login
        
"form-input">
            "text" name="" placeholder="用户名">
        
        
"form-input">
            "password" name="" placeholder="密码">
        
        
"form-input">
            "submit" name="登录" value="登录">
        
        "#" class="forget">忘记密码?
        "#" class="register">立即注册
    
    
    

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;
}

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