网站首页 > 基础教程 正文
今天带大家实现一个熊猫登录页，并且熊猫的眼神会跟着鼠标光标去进行改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CodePen - Panda Login</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- partial:index.partial.html -->
<div class="panda">
<div class="ear"></div>
<div class="face">
<div class="eye-shade"></div>
<div class="eye-white">
<div class="eye-ball"></div>
</div>
<div class="eye-shade rgt"></div>
<div class="eye-white rgt">
<div class="eye-ball"></div>
</div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="body"></div>
<div class="foot">
<div class="finger"></div>
</div>
<div class="foot rgt">
<div class="finger"></div>
</div>
</div>
<form>
<div class="hand"></div>
<div class="hand rgt"></div>
<h1>Panda Login</h1>
<div class="form-group">
<input required="required" class="form-control" />
<label class="form-label">Username </label>
</div>
<div class="form-group">
<input
id="password"
type="password"
required="required"
class="form-control"
/>
<label class="form-label">Password</label>
<p class="alert">Invalid Credentials..!!</p>
<button class="btn">Login</button>
</div>
</form>
<!-- partial -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="./script.js"></script>
<script>
$("#password").focusin(function () {
$("form").addClass("up");
});
$("#password").focusout(function () {
$("form").removeClass("up");
});
// Panda Eye move
$(document).on("mousemove", function (event) {
var dw = $(document).width() / 15;
var dh = $(document).height() / 15;
var x = event.pageX / dw;
var y = event.pageY / dh;
$(".eye-ball").css({
width: x,
height: y,
});
});
// validation
$(".btn").click(function () {
$("form").addClass("wrong-entry");
setTimeout(function () {
$("form").removeClass("wrong-entry");
}, 3000);
});
</script>
<style>
@import url(https://fonts.googleapis.com/css?family=Dancing+Script|Roboto);
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
background: #cc3367;
text-align: center;
font-family: "Roboto", sans-serif;
}
.panda {
position: relative;
width: 200px;
margin: 50px auto;
}
.face {
width: 200px;
height: 200px;
background: #fff;
border-radius: 100%;
margin: 50px auto;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
z-index: 50;
position: relative;
}
.ear,
.ear:after {
position: absolute;
width: 80px;
height: 80px;
background: #000;
z-index: 5;
border: 10px solid #fff;
left: -15px;
top: -15px;
border-radius: 100%;
}
.ear:after {
content: "";
left: 125px;
}
.eye-shade {
background: #000;
width: 50px;
height: 80px;
margin: 10px;
position: absolute;
top: 35px;
left: 25px;
transform: rotate(220deg);
border-radius: 25px/20px 30px 35px 40px;
}
.eye-shade.rgt {
transform: rotate(140deg);
left: 105px;
}
.eye-white {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
background: #fff;
z-index: 500;
left: 40px;
top: 80px;
overflow: hidden;
}
.eye-white.rgt {
right: 40px;
left: auto;
}
.eye-ball {
position: absolute;
width: 0px;
height: 0px;
left: 20px;
top: 20px;
max-width: 10px;
max-height: 10px;
transition: 0.1s;
}
.eye-ball:after {
content: "";
background: #000;
position: absolute;
border-radius: 100%;
right: 0;
bottom: 0px;
width: 20px;
height: 20px;
}
.nose {
position: absolute;
height: 20px;
width: 35px;
bottom: 40px;
left: 0;
right: 0;
margin: auto;
border-radius: 50px 20px/30px 15px;
transform: rotate(15deg);
background: #000;
}
.body {
background: #fff;
position: absolute;
top: 200px;
left: -20px;
border-radius: 100px 100px 100px 100px/126px 126px 96px 96px;
width: 250px;
height: 282px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.hand,
.hand:after,
.hand:before {
width: 40px;
height: 30px;
border-radius: 50px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
background: #000;
margin: 5px;
position: absolute;
top: 70px;
left: -25px;
}
.hand:after,
.hand:before {
content: "";
left: -5px;
top: 11px;
}
.hand:before {
top: 26px;
}
.hand.rgt,
.rgt.hand:after,
.rgt.hand:before {
left: auto;
right: -25px;
}
.hand.rgt:after,
.hand.rgt:before {
left: auto;
right: -5px;
}
.foot {
top: 360px;
left: -80px;
position: absolute;
background: #000;
z-index: 1400;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
border-radius: 40px 40px 39px 40px/26px 26px 63px 63px;
width: 82px;
height: 120px;
}
.foot:after {
content: "";
width: 55px;
height: 65px;
background: #222;
border-radius: 100%;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
margin: auto;
}
.foot .finger,
.foot .finger:after,
.foot .finger:before {
position: absolute;
width: 25px;
height: 35px;
background: #222;
border-radius: 100%;
top: 10px;
right: 5px;
}
.foot .finger:after,
.foot .finger:before {
content: "";
right: 30px;
width: 20px;
top: 0;
}
.foot .finger:before {
right: 55px;
top: 5px;
}
.foot.rgt {
left: auto;
right: -80px;
}
.foot.rgt .finger,
.foot.rgt .finger:after,
.foot.rgt .finger:before {
left: 5px;
right: auto;
}
.foot.rgt .finger:after {
left: 30px;
right: auto;
}
.foot.rgt .finger:before {
left: 55px;
right: auto;
}
form {
display: none;
max-width: 400px;
padding: 20px 40px;
background: #fff;
height: 300px;
margin: auto;
display: block;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
transition: 0.3s;
position: relative;
transform: translateY(-100px);
z-index: 500;
border: 1px solid #eee;
}
form.up {
transform: translateY(-180px);
}
h1 {
color: #ff4081;
font-family: "Dancing Script", cursive;
}
.btn {
background: #fff;
padding: 5px;
width: 150px;
height: 35px;
border: 1px solid #ff4081;
margin-top: 25px;
cursor: pointer;
transition: 0.3s;
box-shadow: 0 50px #ff4081 inset;
color: #fff;
}
.btn:hover {
box-shadow: 0 0 #ff4081 inset;
color: #ff4081;
}
.btn:focus {
outline: none;
}
.form-group {
position: relative;
font-size: 15px;
color: #666;
}
.form-group + .form-group {
margin-top: 30px;
}
.form-group .form-label {
position: absolute;
z-index: 1;
left: 0;
top: 5px;
transition: 0.3s;
}
.form-group .form-control {
width: 100%;
position: relative;
z-index: 3;
height: 35px;
background: none;
border: none;
padding: 5px 0;
transition: 0.3s;
border-bottom: 1px solid #777;
color: #555;
}
.form-group .form-control:invalid {
outline: none;
}
.form-group .form-control:focus,
.form-group .form-control:valid {
outline: none;
box-shadow: 0 1px #ff4081;
border-color: #ff4081;
}
.form-group .form-control:focus + .form-label,
.form-group .form-control:valid + .form-label {
font-size: 12px;
color: #ff4081;
transform: translateY(-15px);
}
.alert {
position: absolute;
color: #f00;
font-size: 16px;
right: -180px;
top: -300px;
z-index: 200;
padding: 30px 25px;
background: #fff;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
border-radius: 50%;
opacity: 0;
transform: scale(0, 0);
-moz-transition: linear 0.4s 0.6s;
-o-transition: linear 0.4s 0.6s;
-webkit-transition: linear 0.4s;
-webkit-transition-delay: 0.6s;
transition: linear 0.4s 0.6s;
}
.alert:after,
.alert:before {
content: "";
position: absolute;
width: 25px;
height: 25px;
background: #fff;
left: -19px;
bottom: -8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 50%;
}
.alert:before {
width: 15px;
height: 15px;
left: -35px;
bottom: -25px;
}
.wrong-entry {
-webkit-animation: wrong-log 0.3s;
animation: wrong-log 0.3s;
}
.wrong-entry .alert {
opacity: 1;
transform: scale(1, 1);
}
@-webkit-keyframes eye-blink {
to {
height: 30px;
}
}
@keyframes eye-blink {
to {
height: 30px;
}
}
@-webkit-keyframes wrong-log {
0%,
100% {
left: 0px;
}
20%,
60% {
left: 20px;
}
40%,
80% {
left: -20px;
}
}
@keyframes wrong-log {
0%,
100% {
left: 0px;
}
20%,
60% {
left: 20px;
}
40%,
80% {
left: -20px;
}
}
</style>
</body>
</html>
猜你喜欢
- 2024-11-07 Vue初体验(二) -Vue的基本使用 vue的使用教程
- 2024-11-07 jq图片滑动对比插件twentytwenty jquery 图片左右滚动
- 2024-11-07 在ASP.NET Core Razor页面中使用JQuery Unobtrusive Ajax
- 2024-11-07 IDEA下从零开始搭建SpringBoot工程
- 2024-11-07 Spring Boot+Vue 文件上传，如何携带令牌信息?
- 2024-11-07 jQuery+css3左侧固定导航子菜单展开特效代码
- 2024-11-07 全新web前端开发教程之Jquery Dom操作
- 2024-11-07 带你深度解锁Webpack系列(优化篇)
- 2024-11-07 Vue框架之什么是生命周期钩子? vue3.0生命周期函数
- 2024-11-07 实现高度内容自适应的 textarea div高度自适应内容
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)