效果预览：效果预览
源码下载：关注公众号【RMRF】，回复【css1】可获取源码
密码输入框获取、失去焦点时，猫头鹰完成挡眼睛、放下的动作
一、HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>login</title>
<link rel="stylesheet" href="./css/index.css">
<script>
function onFucus() {
let owl = document.getElementById('owl')
owl.classList.add("owl-close")
}
function onBlur() {
let owl = document.getElementById('owl')
owl.classList.remove("owl-close")
}
</script>
</head>
<body>
<div class="login">
<div class="card">
<div id="owl" class="owl">
<div class="eyes"></div>
<div class="arm-up-right"></div>
<div class="arm-up-left"></div>
<div class="arm-down-left"></div>
<div class="arm-down-right"></div>
</div>
<div class="content">
<div class="item">
<img class="icon" src="./images/account.png" alt="">
<input type="text" placeholder="account">
</div>
<div class="item">
<img class="icon" src="./images/pwd.png" alt="">
<input type="password" placeholder="password" onfocus="onFucus()" onblur="onBlur()">
</div>
<div class="item">
<img class="icon" src="./images/code.png" alt="">
<input type="text" placeholder="code">
<img class="code" src="./images/number.png" alt="">
</div>
<div class="item">
<button>登陆</button>
</div>
</div>
</div>
</div>
</body>
</html>
二、CSS样式
.login {
display: flex;
align-items: center;
justify-content: center;
height: 90vh;
}
.card {
position: relative;
padding: 30px;
width: 400px;
border-radius: 5px;
box-shadow: 0 0 6px #dddddd;
}
.content .item {
display: flex;
position: relative;
padding: 10px 0;
}
.content .icon {
position: absolute;
left: 8px;
top: 22px;
width: 20px;
height: 20px;
}
.content .code {
height: 40px;
}
.content input {
border-radius: 4px;
border: 1px solid #dcdfe6;
height: 40px;
outline: 0;
padding-left: 35px;
width: 100%;
}
.content input::input-placeholder {
color: #a8abb2 !important;
}
input::-webkit-input-placeholder {
color: #a8abb2;
}
input::-moz-placeholder {
color: #a8abb2;
}
input::-moz-placeholder {
color: #a8abb2;
}
input::-ms-input-placeholder {
color: #a8abb2;
}
.content button {
width: 100%;
border: 1px solid #dcdfe6;
border-radius: 4px;
cursor: pointer;
transition: 0.1s;
padding: 8px 15px;
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.content button:hover {
background-color: rgba(64, 160, 255, 0.7);
}
.content button:active {
background-color: rgba(64, 160, 255, 0.8);
}
.owl {
position: absolute;
top: -82px;
left: 50%;
width: 116px;
height: 92px;
background-size: 116px 92px;
margin-left: -64px;
cursor: pointer;
background-image: url(../images/face.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.owl .eyes {
width: 100%;
height: 100%;
opacity: 0;
background-image: url(../images/eye.png);
background-repeat: no-repeat;
background-size: 100% 100%;
transition: 0.1s ease-out 0s;
}
.owl .arm-up-right {
width: 51px;
height: 41px;
position: absolute;
bottom: 10px;
right: 5px;
z-index: 2;
background-position: 0 25px;
opacity: 0;
background-image: url(../images/arm-up-right.png);
background-repeat: no-repeat;
background-size: 100% 100%;
transform: translateX(57px) scale(0.8);
transform-origin: 0 40px;
transition: background-position 0.3s ease-out,
transform 0.3s ease-out, opacity 0s linear 0.2s;
}
.owl .arm-up-left {
position: absolute;
bottom: 10px;
left: -3px;
width: 52px;
height: 41px;
z-index: 2;
background-position: 0 25px;
opacity: 0;
transform: translateX(-34px) scale(0.8);
transform-origin: 0 40px;
background-image: url(../images/arm-up-left.png);
background-repeat: no-repeat;
background-size: 100% 100%;
transition: background-position 0.3s ease-out,
transform 0.3s ease-out, opacity 0s linear 0.2s;
}
.owl .arm-down-left {
position: absolute;
bottom: 2px;
left: -34px;
width: 43px;
height: 25px;
z-index: 1;
transition: 0.3s ease-out;
background-image: url(../images/arm-down-left.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.owl .arm-down-right {
position: absolute;
bottom: 1px;
right: -40px;
width: 43px;
height: 26px;
z-index: 1;
transition: 0.3s ease-out;
background-image: url(../images/arm-down-right.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.owl-close .eyes {
opacity: 1;
transition: 0.1s ease-out 0.2s;
}
.owl-close .arm-up-right {
background-position: 0 0;
opacity: 1;
transform: scale(1);
transition: background-position 0.3s ease-out,
transform 0.3s ease-out;
}
.owl-close .arm-up-left {
transform: scale(1);
background-position: 0 0;
opacity: 1;
transition: background-position 0.3s ease-out,
transform 0.3s ease-out;
}
.owl-close .arm-down-left {
transform: translateX(40px) scale(0) translateY(-10px);
}
.owl-close .arm-down-right {
transform: translateX(-32px) scale(0) translateY(-8px);
}
