使用css3+html实现炫酷的登陆页面demo

最新推荐文章于 2023-12-11 13:35:41 发布

weixin_45748460

最新推荐文章于 2023-12-11 13:35:41 发布

阅读量918

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_45748460/article/details/106286100

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用css3+html实现炫酷的登陆页面demo
效果如图：
在这里插入图片描述
直接上代码：

<!DOCTYPE html>
<html lang="zh">
<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>
		*{
			padding:0;
			margin:0;
		}
		.wrap {
			background-image: linear-gradient(to right,#000000, #424242);
			position: fixed;
			width: 100%;
			height: 100%;
		}
		.login{
			position: absolute;
			left:50%;
			top:200px;
			width:300px;
			margin-left: -150px;
		}
		.title{
			width: 100%;
			text-align: center;
			heigth: 50px;
			line-height: 50px;
			font-size:22px;
			color: #fff;
			text-shadow: 5px 5px 5px #0000ca;
			margin-bottom: 20px;
		}
		.form-item{
			position: relative;
			width: 100%;
			height:50px;
		}
		.form-item input{
			position: relative;
			width: 100%;
			color:#3c70ff;
			font-size: 16px;
			background-color: transparent;
			border:0;
			border-bottom: 1px solid #3c70ff;
			outline: none;
			z-index:10;
		}
		.form-item label{
			position: absolute;
			left:0;
			top:-5px;
			font-size:20px;
			color:#3c70ff;
			transition: all .5s;
		}
		.form-item input:focus+label,.form-item input:valid+label{
			top:-20px;
			font-size:16px;
		}
		.btn{
			width:80px;
			height: 40px;
			text-align: center;
			padding:10px;
			margin-top: 20px;
			border:0;
			color:#fff;
			text-transform: uppercase;
			letter-spacing:2px;
			background-color: #414141;
			position: relative;
			overflow: hidden;
		}
		.btn:hover{
			background-color: #3c70ff;
			box-shadow: 0 0 5px #3c70ff,
						0 0 25px #3c70ff,
						0 0 50px #3c70ff,
						0 0 75px #3c70ff;
		}
		.btn span:nth-of-type(1){
			width: 100%;
			height: 2px;
			position: absolute;
			left: -100%;
			top:0;
			background-image: linear-gradient(to right,#3c70ff,#203d8b);
			animation: line1 1s linear infinite;
		}
		.btn span:nth-of-type(2){
			width: 2px;
			height: 100%;
			position: absolute;
			right: 0;
			top:-100%;
			background-image: linear-gradient(#3c70ff,#203d8b);
			animation: line2 1s .25s linear infinite;
		}
		.btn span:nth-of-type(3){
			width: 2px;
			height: 100%;
			position: absolute;
			left: 0;
			bottom:-100%;
			background-image: linear-gradient(#3c70ff,#203d8b);
			animation: line3 1s .5s linear infinite;
		}
		.btn span:nth-of-type(4){
			width: 100%;
			height: 2px;
			position: absolute;
			right: -100%;
			bottom:0;
			background-image: linear-gradient(to left,#3c70ff,#203d8b);
			animation: line4 1s .75s linear infinite;
		}
		@keyframes line1{
			50%,100%{
				left:100%;
			}
		}
		@keyframes line2{
			50%,100%{
				top:100%;
			}
		}
		@keyframes line3{
			50%,100%{
				bottom:100%;
			}
		}
		@keyframes line4{
			50%,100%{
				right:100%;
			}
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="login">
			<div class="title">登录框</div>
			<form action="">
				<div class="form-item">
					<input type="text" required>
					<label for="">username</label>
				</div>
				<div class="form-item">
					<input type="password" required>
					<label for="">password</label>
				</div>
			<button class="btn">
				submit
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</button>
			</form>
		</div>
	</div>
</body>
</html>

weixin_45748460

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
使用css3+html实现炫酷的登陆页面demo

使用css3+html实现炫酷的登陆页面demo效果如图：直接上代码：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=
复制链接

扫一扫