模仿B站一个up主写的登录页面

最新推荐文章于 2022-08-15 16:26:42 发布

尽悲欢

最新推荐文章于 2022-08-15 16:26:42 发布

阅读量454

点赞数

分类专栏：前端文章标签： html css css3 html5 flex

本文链接：https://blog.csdn.net/abcsxc258/article/details/113340332

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="login">
        <h2>用户登录</h2>
        <div class="login_box">
            <input type="text" name="" id="" required="required" />
            <label>用户名</label>
        </div>
        <div class="login_box">
            <input type="password" name="" id="" required="required" />
            <label>密码</label>
        </div>
        <a href="javascript:void(0)">
            登录
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </a>
    </div>
</body>

</html>

2.CSS部分

* {
	/* 初始化内外边距为0 */
	padding: 0;
	margin: 0;
	/* 盒子模型 */
	box-sizing: border-box;
}

body {
	/* 弹性布局，让页面元素水平+垂直居中 */
	display: flex;
	justify-content: center;
	align-items: center;
	/* 让页面始终占浏览器可视区域总高度 */
	height: 100vh;
	/* 背景渐变色 */
	background: linear-gradient(#141e30,#243b55);
}
.login {
	/* 弹性布局，让子元素称为弹性项目 */
	display: flex;
	/*让弹性项目垂直排列，原理是改变弹性盒子的主轴方向 父元素
	就是弹性盒子 现在改变后的主轴方向向下了 */
	flex-direction: column;
	/*让弹性项目在交叉轴方向水平居中，现在主轴方向就是向下 
	交叉轴的方向就是向右*/
	align-items: center;
	width: 400px;
	padding: 40px;
	background-color: rgba(0, 0, 0, 0.2);
	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
}
.login h2 {
	color: #fff;
	margin-bottom: 30px;
}
.login .login_box {
	/* 相对定位 */
	position: relative;
	width: 100%;
}
.login .login_box input {
	/* 消除input的边框和轮廓 */
	outline: none;
	border: none;
	width: 100%;
	padding: 10px 0;
	margin-bottom: 30px;
	color: #fff;
	font-size: 16px;
	border-bottom: 1px solid #fff;
	/* 背景颜色为透明色 */
	background-color: transparent;
}
.login .login_box label {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px,0;
	color: #fff;
	/* 这个属性的默认是auto 表示可以被点击选中
	设置为none后就不能被点击 */
	pointer-events: none;
	/* 加个过渡 */
	transition: all 0.5s;
}

/* ：focus选择器是当input获得鼠标焦点时触发的样式 + 是相邻兄弟
选择器 去找与input相邻的兄弟laber  */
/* ：valid选择器是判断input框中的内容是否合法，如果合法会执行
下面的代码属性 不合法就不执行 */
.login .login_box input:focus +label,
.login .login_box input:valid + label {
	top: -20px;
	color: #03e9f4;
	font-size: 12px;
}
.login a {
	overflow: hidden;
	position: relative;
	padding: 10px 20px;
	color: #03e9f4;
	/* 取消a标签原来有的下划线 */
	text-decoration: none;
	/* 同样加个过渡 */
	transition: all 0.5s;
}
.login a:hover {
	color: #fff;
	border-radius: 5px;
	background-color: #03e9f4;
	box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 25px
	#03e9f4,0 0 100px #03e9f4;
}
.login a span {
	position: absolute;
}
.login a span:first-child {
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	/* to right就是往右边 */
	background: linear-gradient(to right,transparent,
	#03e9f4);
	/* 动画名称 时间 匀速运动 无限次运动 */
	animation: move1 1s linear infinite;
}
.login a span:nth-child(2) {
	right: 0;
	top:  -100%;
	width: 2px;
	height: 100%;
	background: linear-gradient(transparent,#03e9f4);
	/* 多了个0.25s是延迟时间 */
	animation: move2 1s linear 0.25s infinite;
}
.login a span:nth-child(3){
	right: -100%;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to left,transparent,#03e9f4);
	animation: move3 1s linear 0.5s infinite;
}
.login span:last-child {
	left: 0;
	bottom: -100%;
	width: 2px;
	height: 100%;
	background: linear-gradient(#03e9f4,transparent);
	animation: move4 1s linear 0.75s infinite;
}


/* 动画 */
@keyframes move1 {
	0% {
		left: -100%;
	}
	50%,
	100% {
		left: 100%;
	}
}
@keyframes move2 {
	0% {
		top:-100%;
	}
	50%,
	100% {
		top:100%;
	}
}
@keyframes move3 {
	0% {
		right:-100%;
	}
	50%,
	100% {
		right:100%;
	}
}
@keyframes move4 {
	0% {
		bottom:-100%;
	}
	50%,
	100% {
		bottom:100%;
	}
}