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

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

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

二、文件结构展示

三、源码区

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

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

HTML + CSS实现动态背景的登录效果相关推荐

css背景图重复怎们弄,CSS如何实现背景图像重复效果
背景图像重复效果,相信大家都有在各大网站上见过.一个好看的背景图片重复效果,可以使我们的网页样式更加美观,内容更加丰富.我们可以通过CSS中background的相关属性来实现这种效果. 推荐参考:& ...
HTML+CSS实现动态背景登录页面
实现背景图片的动态变换首先我们把背景图片插入进去,在HTML页面body板块中,添加几个图片div <body><div class="bgk">< ...
html纯css类似qq登录的动态背景,QQ登录蓝色动态背景JS实现
QQ2019版登录界面的蓝色背景 JS实现代码 $(function () { if (!window.ActiveXObject && !!document.createElemen ...
【CSS】页面背景的毛玻璃效果
前言:最近学习到了一种超级好看,超级高级的背景设计效果,迫不及待的分享出来了适用情况:用图片做背景时,将弹框和背景融为一体一.基础设计(之前的实现方法) 页面很简单,在外层的div定义backgr ...
星空css,CSS星空动态背景
sharo1 2021/7/1 12:13:40 父容器 {/*设置宽高*/ width: 100%; height: 100%; /*下面的属性是必须的*/ position: relative; ...
html怎么给背景图固定位置,css实现固定背景图像的方法
css实现固定背景图像的方法发布时间:2020-08-29 11:26:59 来源:亿速云阅读:81 作者:小新小编给大家分享一下css实现固定背景图像的方法,相信大部分人都还不怎么了解,因此分 ...
vue 项目中使实现粒子动态背景图
在vue中,实现粒子动态背景图的效果首先安装插件 npm install vue-particles --save-dev 在main.js 文件中进行引用注册 // 动态粒子 import Vu ...
有趣的HTML实例（八）一个很有趣的动态背景（css+js）
小时候,谁都觉得自己的未来闪闪发光,不是吗?但是一旦长大,没有一件事会遂自己心愿. --<被嫌弃的松子的一生> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显 ...
android采用MVP完整漫画APP、钉钉地图效果、功能完善的音乐播放器、仿QQ动态登录效果、触手app主页等源码...
Android精选源码一个可以上拉下滑的Ui效果,觉得好看可以学学 APP登陆页面适配一款采用MVP的的完整漫画APP源码 android实现钉钉地图效果源码一个使用单个文字生成壁纸图片的app ...

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

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

二、文件结构展示

三、源码区

HTML + CSS实现动态背景的登录效果相关推荐

最新文章

热门文章