念念不忘
必有回响

B站网页特效学习 — 登录页制作

看到B站讲的不错的网页特效视频,在GitHub也有分享的demo,顺便记录一下总结,需要引入的CDN资源

<!-- font-awesome -->
<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />

登录页一: demo

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Login</title>
		<style>
			* {
				font-family: 'montserrat', sans-serif;
			}
			body {
				margin: 0;
				padding: 0;
				background: #333;
			}
			.login-box {
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100vh; /* vh 视口高度 viewport height 百分比单位*/
				background-image: linear-gradient(
					45deg,
					#9fbaa8,
					#31354c
				); /*设置颜色渐变 方向(0deg垂直向上) 起点颜色 终点颜色*/
				transition: 0.4s; /*过度效果  property duration timing-function delay 默认属性:all 0 ease 0*/
			}
			.login-form {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%); /*定义 2D 转换8 */
				color: white;
				text-align: center;
			}
			.login-form h1 {
				font-weight: 400;
				margin-top: 0;
			}
			.txtb {
				display: block;
				box-sizing: border-box;
				width: 240px;
				background: #ffffff28;
				border: 1px solid white;
				padding: 10px 20px;
				color: white;
				outline: none;
				margin: 10px 0;
				border-radius: 6px;
				text-align: center;
			}
			.login-btn {
				width: 240px;
				background: #2c3e50;
				border: 0;
				color: white;
				padding: 10px;
				border-radius: 6px;
				cursor: pointer;
			}
			.hide-login-btn {
				color: #000;
				position: absolute;
				top: 40px;
				right: 40px;
				cursor: pointer;
				font-size: 30px;
				opacity: 0.7;
				transform: rotate(45deg); /*定义 2D 转换8 */
			}
			.show-login-btn {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: white;
				border: 2px solid;
				padding: 10px;
				cursor: pointer;
			}
			.showed {
				left: 0;
			}
		</style>
	</head>
	<body>
		<div class="show-login-btn">
			-> Show Login Form
		</div>

		<div class="login-box">
			<div class="hide-login-btn">
				+
			</div>
			<form action="index.html" method="POST" class="login-form">
				<h1>Welcome</h1>
				<input class="txtb" type="text" name="" placeholder="Username" />
				<input class="txtb" type="password" name="" placeholder="Password" />
				<input class="login-btn" type="submit" name="" value="Login" disabled />
			</form>
		</div>
		<script type="text/javascript">
			function hasClass(element, clssname) {
				return element.className.match(new RegExp('(\\s|^)' + clssname + '(\\s|$)'))
			}
			function addClass(element, clssname) {
				if (!this.hasClass(element, clssname)) element.className += ' ' + clssname
			}
			function removeClass(element, clssname) {
				if (hasClass(element, clssname)) {
					var reg = new RegExp('(\\s|^)' + clssname + '(\\s|$)')
					element.className = element.className.replace(reg, ' ')
				}
			}
			function toggleClass(element, clssname) {
				if (hasClass(element, clssname)) {
					removeClass(element, clssname)
				} else {
					addClass(element, clssname)
				}
			}
			var loginBox = document.getElementsByClassName('login-box')
			var showBtn = document.getElementsByClassName('show-login-btn')
			var hideBtn = document.getElementsByClassName('hide-login-btn')
			showBtn[0].addEventListener('click', function() {
				toggleClass(loginBox[0], 'showed')
			})
			hideBtn[0].addEventListener('click', function() {
				toggleClass(loginBox[0], 'showed')
			})
		</script>
	</body>
</html>

登录页二:demo

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>登录页</title>
		<style>
			body {
				margin: 0;
				padding: 0;
				font-family: sans-serif;
				background: #34495e;
			}
			.box {
				width: 300px;
				padding: 40px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background: #191919;
				text-align: center;
			}
			.box h1 {
				color: white;
				text-transform: uppercase;
				font-weight: 500;
			}
			.box input[type='text'],
			.box input[type='password'] {
				border: 0;
				background: none;
				display: block;
				margin: 20px auto;
				text-align: center;
				border: 2px solid #3498db;
				padding: 14px 10px;
				width: 200px;
				outline: none;
				color: white;
				border-radius: 24px;
				transition: 0.25s;
			}
			.box input[type='text']:focus,
			.box input[type='password']:focus {
				width: 280px;
				border-color: #2ecc71;
			}
			.submit {
				border: 0;
				background: none;
				margin: 20px auto;
				margin-top: 0;
				display: inline-block;
				text-align: center;
				border: 2px solid #3498db;
				padding: 10px 40px;
				outline: none;
				color: white;
				border-radius: 24px;
				transition: 0.25s;
				cursor: pointer;
				text-decoration: none;
				font-size: 12px;
			}
			.submit:hover {
				background: #2ecc71;
				border-color: #2ecc71;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h1>Login</h1>
			<input type="text" placeholder="Username" />
			<input type="password" placeholder="Password" />
			<a class="submit" href="https://github.com/yyeexin/bilibili-html-demo">Login</a>
		</div>
	</body>
</html>


登录页三:demo

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Login</title>
		<style>
			body {
				margin: 0;
				padding: 0;
				background: #fff;
			}
			.signup-form {
				width: 300px;
				padding: 20px;
				text-align: center;
				background: url('../images/bg.jpg');
				background-size: cover;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				overflow: hidden;
			}
			.signup-form h1 {
				margin-top: 100px;
				font-family: 'Permanent Marker', cursive;
				color: #fff;
				font-size: 40px;
			}
			.signup-form input {
				display: block;
				width: 100%;
				padding: 0 16px;
				height: 44px;
				text-align: center;
				box-sizing: border-box;
				outline: none;
				border: none;
				font-family: 'montserrat', sans-serif;
			}
			.txtb {
				margin: 20px 0;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 6px;
			}
			.signup-btn {
				margin-top: 60px;
				margin-bottom: 20px;
				background: #487eb0;
				color: #fff;
				border-radius: 44px;
				cursor: pointer;
				transition: 0.8s;
			}
			.signup-btn:hover {
				transform: scale(0.96);
			}
			.signup-form a {
				text-decoration: none;
				color: #fff;
				font-family: 'montserrat', sans-serif;
				font-size: 14px;
				padding: 10px;
				transition: 0.8s;
				display: block;
			}
			.signup-form a:hover {
				background: rgba(0, 0, 0, 0.25);
			}
		</style>
	</head>
	<body>
		<div>
			<div class="signup-form">
				<h1>Sign Up</h1>
				<input type="text" placeholder="Full Name" class="txtb" />
				<input type="email" placeholder="Email" class="txtb" />
				<input type="password" placeholder="Password" class="txtb" />
				<input type="submit" value="Create Account" class="signup-btn" />
				<a href="https://github.com/yyeexin/bilibili-html-demo">Already Have One ?</a>
			</div>
		</div>
	</body>
</html>

 

赞(4) 打赏
未经允许不得转载:小蚁上树 » B站网页特效学习 — 登录页制作
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址