新增第171个小实例：带密码灯照射的登录界面
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
b1d6fe0252
commit
74af7023b9
|
|
@ -177,4 +177,5 @@
|
|||
167. HTML5+CSS3+JS小实例：鼠标滚轮水平滚动
|
||||
168. HTML5+CSS3+JS小实例：仿优酷视频轮播图
|
||||
169. HTML5+CSS3小实例：网页底部间隔波浪动画特效
|
||||
170. HTML5+CSS3+JS小实例：打散文字随机浮动特效
|
||||
170. HTML5+CSS3+JS小实例：打散文字随机浮动特效
|
||||
171. HTML5+CSS3+JS小实例：带密码灯照射的登录界面
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口宽高 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 水平+垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fefefe;
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 弄两个圆点缀一下背景 */
|
||||
body::before,
|
||||
body::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
}
|
||||
body::before{
|
||||
width: 30vh;
|
||||
height: 30vh;
|
||||
background-color: #7875ac40;
|
||||
top: 10vh;
|
||||
left: -10vh;
|
||||
}
|
||||
body::after{
|
||||
width: 60vh;
|
||||
height: 60vh;
|
||||
background-color: #7875ac20;
|
||||
bottom: -15vh;
|
||||
right: -15vh;
|
||||
}
|
||||
/* 登录框 */
|
||||
.container{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 500px;
|
||||
height: 450px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 8px 50px rgba(0,0,0,0.08);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
h1{
|
||||
font-size: 40px;
|
||||
width: 75%;
|
||||
letter-spacing: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.ipt-box{
|
||||
width: 75%;
|
||||
margin: 10px 0;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.ipt-box input{
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border: 1px solid #e3e3e3;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
background: none;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
/* 接下来去除密码框自带的小眼睛 */
|
||||
.ipt-box input[type="password"]::-ms-reveal,
|
||||
.ipt-box input[type="password"]::-ms-clear{
|
||||
display: none;
|
||||
}
|
||||
/* 密码框小眼睛 */
|
||||
.ipt-box .eye{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 3;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 登录按钮 */
|
||||
.btn-login{
|
||||
width: 75%;
|
||||
height: 50px;
|
||||
margin-top: 30px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: #7875ac;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
font-size: 18px;
|
||||
letter-spacing: 8px;
|
||||
text-indent: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 灯光照射 */
|
||||
.beam{
|
||||
width: 100vw;
|
||||
height: 25vw;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
right: 30px;
|
||||
/* 绘制三角形 */
|
||||
clip-path: polygon(100% 50%,100% 50%,0 0,0 100%);
|
||||
/* --beam-deg为CSS的自定义属性，这里用作设置灯光的角度，这个值在js中会进行计算 */
|
||||
transform: translateY(-50%) rotate(var(--beam-deg,0));
|
||||
/* 设置旋转基点 */
|
||||
transform-origin: 100% 50%;
|
||||
/* 设置过渡 */
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
/* 接下来是打开密码灯后的样式变化 */
|
||||
body.show-password{
|
||||
background-color: #000;
|
||||
}
|
||||
body.show-password::before,
|
||||
body.show-password::after{
|
||||
display: none;
|
||||
}
|
||||
.show-password .container{
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
box-shadow: 0 8px 50px rgba(255,255,255,0.25);
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
.show-password h1{
|
||||
color: #fff;
|
||||
}
|
||||
.show-password .ipt-box{
|
||||
border: 1px solid rgba(255,255,255,0.5);
|
||||
}
|
||||
.show-password input{
|
||||
color: #fff;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.show-password #password{
|
||||
color: #000;
|
||||
}
|
||||
.show-password .beam{
|
||||
background-color: yellow;
|
||||
}
|
||||
.show-password .btn-login{
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
.show-password .eye{
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>带密码灯照射的登录界面</title>
|
||||
<!-- 引入字体图标库 -->
|
||||
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="171.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>登录</h1>
|
||||
<div class="ipt-box">
|
||||
<input type="text" placeholder="账号" autocomplete="off">
|
||||
</div>
|
||||
<div class="ipt-box">
|
||||
<input type="password" id="password" placeholder="密码" autocomplete="off">
|
||||
<i class="eye fa fa-eye-slash"></i>
|
||||
<div class="beam"></div>
|
||||
</div>
|
||||
<button class="btn-login">登录</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<script src="171.js"></script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
// 要操作的元素
|
||||
const body=document.body;
|
||||
const eye=document.querySelector('.eye');
|
||||
const beam=document.querySelector('.beam');
|
||||
const passwordInput=document.getElementById('password');
|
||||
|
||||
// 为body绑定鼠标移动事件
|
||||
body.addEventListener('mousemove',function(e){
|
||||
let rect=beam.getBoundingClientRect();
|
||||
let mouseX=rect.right+(rect.width/2);
|
||||
let mouseY=rect.top+(rect.height/2);
|
||||
let rad=Math.atan2(mouseX-e.pageX,mouseY-e.pageY);
|
||||
let deg=(rad*(20/Math.PI)*-1)-350;
|
||||
// 设置CSS自定义属性--beam-deg（灯光射线角度）
|
||||
body.style.setProperty('--beam-deg',deg+'deg');
|
||||
})
|
||||
|
||||
// 为密码框小眼睛绑定点击事件
|
||||
eye.addEventListener('click',function(e){
|
||||
e.preventDefault();
|
||||
body.classList.toggle('show-password');
|
||||
passwordInput.type=passwordInput.type==='password'?'text':'password';
|
||||
eye.className='eye fa '+(passwordInput.type==='password'?'fa-eye-slash':'fa-eye');
|
||||
passwordInput.focus();
|
||||
})
|
||||
Loading…
Reference in New Issue