动态背景登录

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

风叶翩翩

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

阅读量779

点赞数

分类专栏： JavaScript H5

本文链接：https://blog.csdn.net/weixin_45743799/article/details/104722025

版权

前端动态背景登录

效果演示
在这里插入图片描述
完整代码
首先我们要导入jquery.js包

html代码

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态背景登录</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="kePublic">
<!--效果html开始-->
<div class="htmleaf-container">
	<div class="wrapper">
		<div class="container">
			<h1>Welcome</h1>
			
			<form class="form">
				<input type="text" placeholder="Username">
				<input type="password" placeholder="Password">
				<button type="submit" id="login-button">Login</button>
			</form>
		</div>
		
		<ul class="bg-bubbles">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</div>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
$('#login-button').click(function (event) {
   
	event.preventDefault();
	$('form').fadeOut(500);
	$('.wrapper').addClass('form-success');
});
</script>

</body>
</html>

css代码

@charset "utf-8";

* {
   
	margin:

最低0.47元/天解锁文章

风叶翩翩

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
动态背景登录

前端动态背景登录效果演示完整代码首先我们要导入jquery.js包html代码<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">...
复制链接

扫一扫

专栏目录