简单HTML+CSS+JavaScript实现简约时尚登录页面详解 动态+渐变

简单HTML+CSS+JavaScript实现简约时尚登录页面详解 动态+渐变_第1张图片

html代码


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<link rel="stylesheet" href="css/style.css" />
	<script src="js/jquery-1.12.4.js">script>
	<body>
		<form action="index.html" class="login-form">
			<h1>Loginh1>
			
			<div class="txtb">
				<input type="text" />
				<span data-placeholder="Username">span>
			div>
			<div class="txtb">
				<input type="password" />
				<span data-placeholder="Password">span>
			div>
			<input type="submit" class="logbtn" value="Login"/>
			
			<div class="bottom-text">
				Don't hava account?<a href="#">Sign upa>
				
			div>
		form>
		<script type="text/javascript">
			// 当输入框获得焦点时给其添加focus类达到
			// 字体上移及横线颜色波动效果
			$(".txtb input").on("focus",function(){
				$(this).addClass("focus");
				
			});
			
			// 当输入框时区焦点时将类移除以消除效果
			$(".txtb input").on("blur",function(){
				if($(this).val()=="")
				$(this).removeClass("focus");
				
			});
		script>
	body>
html>

样式代码


*{
	margin:0;
	padding:0;
	text-decoration: none;
	font-family: montserrat;
}
body{
	/* 设置段落的最小高度: */
	min-height: 100vh;
	/* linear-gradient:创造渐变效果 */
	background-image: linear-gradient(120deg,#3498db,#8e44ad);
}

.login-form{
	width:360px;
	background-color: #f1f1f1;
	height: 580px;
	/* padding:上内边距和下内边距是 80px,右内边距和左内边距是 40px*/
	padding: 80px 40px;
	/* border-radius:形状处理 */
	border-radius: 10px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.login-form h1{
	text-align: center;
	margin-bottom: 60px ;
}

.txtb{
	border-bottom: 2px solid #adadad;
	position:relative;
	margin: 30px 0;
}

.txtb input{
	font-size: 15px;
	color:#333;
	border: none;
	width: 100%;
	outline: none;
	background: none;
	padding: 0 5px;
	height: 40px;
	
}

/* .txtb span::before:对应span之前的元素
	在这里表示username和password
 */
.txtb span::before{
	content: attr(data-placeholder);
	position: absolute;
	top: 50%;
	left: 5px;
	color:#ADADAD;
	transform: translateY(-50%);
	z-index: -1;
	transition: .5s;
	
}

/* .txtb span::after:对应span之之后的元素
	在这里表示username和password下面的横线,不是input框的横线
 */
.txtb span::after{
	content: "";
	position: absolute;
	width: 0%;
	height: 2px;
	background:linear-gradient(120deg,#3498db,#8e44ad);
	transition: .5s;

}

/* 对span之前的元素设置focus效果
   设置字样上移
*/
.focus + span::before{
	top: -5px;
}

/* 对span之前的元素设置focus效果
   设置横线变色
 */
.focus + span::after{
	width:100%;
}


.logbtn{
	width: 100%;
	height: 50px;
	border: none;
	background: linear-gradient(120deg,#3498db,#8e44ad,#3498db);
	background-size: 200%;
	color: #fff;
	/* cursor:pointer:设置鼠标样式 */
	cursor:pointer;
	transition: .5s;
}

/* 设置login按钮背景颜色向右移动
	达到渐变效果
*/
.logbtn:hover{
	background-position:right ;
}

.bottom-text{
	margin-top:60px;
	text-align: center;
	font-size: 13px;
}

仅在学习过程中记录所学内容,如有何处不足还请大佬们指出,欢迎同行一起交流。联系我微信chenhan-wu,记得备注csdn

简单HTML+CSS+JavaScript实现简约时尚登录页面详解 动态+渐变_第2张图片

你可能感兴趣的:(javaWeb,html)