更新第50个小实例
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
b3b8a39333
commit
f4ac680a28
|
|
@ -53,4 +53,5 @@
|
|||
46. HTML5+CSS3小实例之波浪文字效果
|
||||
47. HTML5+CSS3小实例之隐藏式侧边栏菜单
|
||||
48. HTML5+CSS3小实例之3D立方体旋转相册
|
||||
49. HTML5+CSS3小实例之3D分层图像悬停效果
|
||||
49. HTML5+CSS3小实例之3D分层图像悬停效果
|
||||
50. HTML5+CSS3小实例之不偷看密码的超萌猫头鹰登录界面
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(200deg,#72afd3,#96fbc4);
|
||||
}
|
||||
.login-box{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
.input-box{
|
||||
/* 弹性布局 垂直排列 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.input-box input{
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
/* 缩进15像素 */
|
||||
text-indent: 15px;
|
||||
outline: none;
|
||||
border: none;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.input-box input:focus{
|
||||
outline: 1px solid lightseagreen;
|
||||
}
|
||||
.input-box button{
|
||||
border: none;
|
||||
height: 45px;
|
||||
background-color: lightseagreen;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 接下来是猫头鹰的样式 */
|
||||
.owl{
|
||||
width: 211px;
|
||||
height: 108px;
|
||||
/* 背景图片 */
|
||||
background: url("../images/owl-login.png") no-repeat;
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
/* 水平居中 */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.owl .hand{
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 40px;
|
||||
background-color: #472d20;
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
bottom: -8px;
|
||||
/* 沿Y轴缩放0.6倍（压扁） */
|
||||
transform: scaleY(0.6);
|
||||
/* 动画过渡 */
|
||||
transition: 0.3s ease-out;
|
||||
}
|
||||
.owl .hand.hand-r{
|
||||
left: 170px;
|
||||
}
|
||||
.owl.password .hand{
|
||||
transform: translateX(42px) translateY(-15px) scale(0.7);
|
||||
}
|
||||
.owl.password .hand.hand-r{
|
||||
transform: translateX(-42px) translateY(-15px) scale(0.7);
|
||||
}
|
||||
.owl .arms{
|
||||
position: absolute;
|
||||
top: 58px;
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.owl .arms .arm{
|
||||
width: 40px;
|
||||
height: 65px;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 40px;
|
||||
background: url("../images/owl-login-arm.png") no-repeat;
|
||||
transform: rotate(-20deg);
|
||||
transition: 0.3s ease-out;
|
||||
}
|
||||
.owl .arms .arm.arm-r{
|
||||
transform: rotate(20deg) scaleX(-1);
|
||||
left: 158px;
|
||||
}
|
||||
.owl.password .arms .arm{
|
||||
transform: translateY(-40px) translateX(40px);
|
||||
}
|
||||
.owl.password .arms .arm.arm-r{
|
||||
transform: translateY(-40px) translateX(-40px) scaleX(-1);
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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="../css/50.css">
|
||||
<script src="../js/jquery-3.6.0.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('#password').focus(function(){
|
||||
// 密码框获得焦点，追加样式.password
|
||||
$('#owl').addClass('password');
|
||||
}).blur(function(){
|
||||
// 密码框失去焦点，移除样式.password
|
||||
$('#owl').removeClass('password');
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="login-box">
|
||||
<div class="owl" id="owl">
|
||||
<div class="hand"></div>
|
||||
<div class="hand hand-r"></div>
|
||||
<div class="arms">
|
||||
<div class="arm"></div>
|
||||
<div class="arm arm-r"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<input type="text" placeholder="账号">
|
||||
<input type="password" placeholder="密码" id="password">
|
||||
<button>登录</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Loading…
Reference in New Issue