十、CSS3动态背景登录框代码

最新推荐文章于 2024-06-02 11:25:18 发布
最新推荐文章于 2024-06-02 11:25:18 发布
阅读量793 收藏 11
点赞数 5
分类专栏： HTML特效 文章标签： css css3 html html5 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52916408/article/details/115386623
版权

文章目录

十、CSS3动态背景登录框代码

10.1 图片预览

在这里插入图片描述

10.2 index.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>CSS3动态背景登录框代码</title>
		<link rel="stylesheet" type="text/css" href="css/styles.css">
	</head>
	<body>
		<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-2.1.1.min.js" type="text/javascript"></script>
		<script>
			$('#login-button').click(function(event) {
				event.preventDefault();
				$('form').fadeOut(500);
				$('.wrapper').addClass('form-success');
			});
		</script>
	</body>
</html>

10.3 style.css代码

@import url(http://fonts.useso.com/css?family=Source+Sans+Pro:200,300);

* {
	box-sizing: border-box;

	padding: 0;
	font-weight: 300;
}

body {
	font-family: 'Source Sans Pro', sans-serif;
	color: white;
	font-weight: 300;
}

body ::-webkit-input-placeholder {
	/* WebKit browsers */
	font-family: 'Source Sans Pro', sans-serif;
	color: white;
	font-weight: 300;
}

body :-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	font-family: 'Source Sans Pro', sans-serif;
	color: white;
	opacity: 1;
	font-weight: 300;
}

body ::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	font-family: 'Source Sans Pro', sans-serif;
	color: white;
	opacity: 1;
	font-weight: 300;
}

body :-ms-input-placeholder {
	/* Internet Explorer 10+ */
	font-family: 'Source Sans Pro', sans-serif;
	color: white;
	font-weight: 300;
}

.wrapper {
	background: #50a3a2;
	background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
	opacity: 0.8;
	position: absolute;
	top: 27%;
	left: 0;
	width: 100%;
	height: 100%;
	margin-top: -200px;
	overflow: hidden;

}

.wrapper.form-success .container h1 {
	-webkit-transform: translateY(85px);
	-ms-transform: translateY(85px);
	transform: translateY(85px);
}

.container {
	max-width: 600px;
	margin: 0 auto;
	padding: 80px 0;
	height: 400px;
	text-align: center;
}

.container h1 {
	font-size: 40px;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-timing-function: ease-in-put;
	transition-timing-function: ease-in-put;
	font-weight: 200;
}

form {
	padding: 20px 0;
	position: relative;
	z-index: 2;
}

form input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background-color: rgba(255, 255, 255, 0.2);
	width: 250px;
	border-radius: 3px;
	padding: 10px 15px;
	margin: 0 auto 10px auto;
	display: block;
	text-align: center;
	font-size: 18px;
	color: white;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
	font-weight: 300;
}

form input:hover {
	background-color: rgba(255, 255, 255, 0.4);
}

form input:focus {
	background-color: white;
	width: 300px;
	color: #53e3a6;
}

form button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
	background-color: white;
	border: 0;
	padding: 10px 15px;
	color: #53e3a6;
	border-radius: 3px;
	width: 250px;
	cursor: pointer;
	font-size: 18px;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
}

form button:hover {
	background-color: #f5f7f9;
}

.bg-bubbles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.bg-bubbles li {
	position: absolute;
	list-style: none;
	display: block;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.15);
	bottom: -160px;
	-webkit-animation: square 25s infinite;
	animation: square 25s infinite;
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
}

.bg-bubbles li:nth-child(1) {
	left: 10%;
}

.bg-bubbles li:nth-child(2) {
	left: 20%;
	width: 80px;
	height: 80px;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-duration: 17s;
	animation-duration: 17s;
}

.bg-bubbles li:nth-child(3) {
	left: 25%;
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
}

.bg-bubbles li:nth-child(4) {
	left: 40%;
	width: 60px;
	height: 60px;
	-webkit-animation-duration: 22s;
	animation-duration: 22s;
	background-color: rgba(255, 255, 255, 0.25);
}

.bg-bubbles li:nth-child(5) {
	left: 70%;
}

.bg-bubbles li:nth-child(6) {
	left: 80%;
	width: 120px;
	height: 120px;
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
	background-color: rgba(255, 255, 255, 0.2);
}

.bg-bubbles li:nth-child(7) {
	left: 32%;
	width: 160px;
	height: 160px;
	-webkit-animation-delay: 7s;
	animation-delay: 7s;
}

.bg-bubbles li:nth-child(8) {
	left: 55%;
	width: 20px;
	height: 20px;
	-webkit-animation-delay: 15s;
	animation-delay: 15s;
	-webkit-animation-duration: 40s;
	animation-duration: 40s;
}

.bg-bubbles li:nth-child(9) {
	left: 25%;
	width: 10px;
	height: 10px;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-duration: 40s;
	animation-duration: 40s;
	background-color: rgba(255, 255, 255, 0.3);
}

.bg-bubbles li:nth-child(10) {
	left: 90%;
	width: 160px;
	height: 160px;
	-webkit-animation-delay: 11s;
	animation-delay: 11s;
}

@-webkit-keyframes square {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	100% {
		-webkit-transform: translateY(-700px) rotate(600deg);
		transform: translateY(-700px) rotate(600deg);
	}
}

@keyframes square {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	100% {
		-webkit-transform: translateY(-700px) rotate(600deg);
		transform: translateY(-700px) rotate(600deg);
	}
}

10.4 jquery-2.1.1.min代码

链接：分享百度网盘的链接，点击即可下载
提取码：0258

&小小白&
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
CSS实现一个好看的登录框
SAKURE2210866448的博客
02-29 8567
写了一个自己很喜欢的登录框，话不多说先上图。 代码很简单，给大家参考???????????? 目录结构： 这里给大家推荐一个好用的图标库????Font Awesome html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte...
CSS3动态背景登录框特效代码
03-20
【CSS3动态背景登录框特效代码】是一种利用现代网页技术，特别是CSS3和jQuery，创建出具有视觉吸引力的登录界面的方法。此特效的核心在于利用CSS3的动画效果和选择器来增强用户交互体验，同时结合jQuery库来实现更为...
html5 css3登录页面动画特效,CSS3超炫用户信息页面切换动画特效
weixin_39668890的博客
06-04 586
这是一款效果非常炫酷的纯CSS3用户信息页面切换动画特效。在特效开始时，一个小球落下到页面顶部，紧接着在小球位置以圆形扩展到整个页面，这时个人信息卡片以动画的形式出现，效果非常的炫。制作方法HTML结构该特效使用HTML5的元素作为包裹元素。里面分为和个人信息描述文字的div.profile-bio元素，以及一组社交网站图标，这些图标都是使用SVG来制作的。 David Jo...
HTML+CSS+JS 实现全屏下雪动画背景用户登录注册表单
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
09-29 1133
HTML+CSS+JS 实现全屏下雪动画背景用户登录注册表单 作品介绍 1.网页作品简介 ：一款非常大气实用的html5全屏下雪动画背景用户登录注册表单切换模板，登录、注册、忘记密码三个表单窗口可自由切换。更有趣的是，当点击密码输入框时，猫头鹰会蒙上眼睛。 2.网页作品编辑：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepa
CSS动画效果（炫酷登录页面）
最新发布
2303_82176667的博客
06-02 695
一个酷炫的登录页不仅能够吸引用户的注意力，还能够提升品牌形象，增加用户的信任感。CSS动画效果的引入，可以为登录页增添活力，创造更加动态和互动的用户体验。本文将探讨如何使用CSS来实现各种动画效果，从微妙的背景渐变到引人注目的登录框动画，一步步指导您打造出一个既美观又实用的酷炫登录页。
使用JS、CSS、H5实现简单的登录弹窗，可保存用户信息
yzq0820的博客
07-06 3585
目录 一、效果展示二、H5布局三、css的布局四、获取元素六、设置登录弹窗出现与关闭七、设置弹窗的移动八、设置保存信息九、源码评论区自取网页结构分为三大块，第一部分点击a标签会弹出登录框，第二部分是登录框用户填写表单，需要注意A标签中使用javascript:;第三部分是设置突出背景三、css的布局需要注意登录弹窗和背景板的权重布局的时候就需要将，背景板和弹窗使用display: none;来实现消失的效果，在后续的步骤中来实现显现和消失的效果四、获取元素 需要将所有元素获取，......
HTML&CSS登录界面及讲解
热门推荐
weixin_54627824的博客
04-20 1万+
PS:该源码非原创，原文章来自(2条消息) HTML+CSS登录界面_桐艾的博客-CSDN博客_登录页面 这里只做源码讲解 页面效果如下： 首先是login.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="./login.css"/>...
CSS3实现动态背景登录框的代码
12-29
基于CSS3动态背景登录框代码。这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效。效果图如下： 实现的代码如下： html代码： <h1>Welcome <form class=form> <input type=text ...
CSS3动态背景登录框代码.zip
11-16
"CSS3动态背景登录框代码" 是一个使用CSS3技术实现的具有动态背景效果的登录框代码示例。这个项目可能包含HTML、CSS和JavaScript（可能包括jQuery库）文件，用于创建一个视觉吸引人的、交互式的用户登录界面。 ...
五款炫酷精美动态登录页面，彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
叶绿体不忘呼吸
12-30 6400
五款炫酷精美动态登录页面，彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码，拿来即可用。
纯CSS3用户登录界面设计
04-24
纯CSS3用户登录界面设计
简单登录注册界面模板（HTML+CSS+JavaScript）
12-28
简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。
css+html登录界面
07-21
纯css+html设计的登录界面，简约设计，简化一切冗余的部分
HTML+CSS实现动态背景登录页面
09-24
主要介绍了HTML+CSS实现动态背景登录页面的相关资料,需要的朋友可以参考下
动态背景登录页面(基于jquery)
04-27
动态登录基于jquery做的，每隔几秒会自动将登录背景图片切换
基于 HTML5/CSS3 制作漂亮的登录页面
老T的专栏
09-29 7983
HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5是互联网的下一代标准，被认为是互联网的核心技术之一。CSS3是CSS（层叠样式表）技术的升级版本，CSS3原CSS基础上新增了很多新特征。
css用户登录,纯css3简单的用户登录框样式代码
weixin_31315567的博客
08-03 971
html网页设计：一个简单的登录界面代码！在html网页设计中，一个“登录”按钮怎么编写代码？列如所给图片的“登录”按钮怎么用html代码显示出来，要求能够识别是否输入用户名和密码！是这样的效果吗？3function r(){var username=document.getElementById("username");var pass=document.getElementById("pass...
HTML+CSS编写登录框
Atkx's Blog
01-18 2555
用html制作用户登录页面 1.表单提交 <form action="/form.html" method="GET"> action 是表单提交的地址 method 是提交保单的方法

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

&小小白&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值