分享一个会遮掩的吊炸天登录页面

今天逛gitee，发现了一个有趣的页面，于是来分享一下。

先看效果：

熊猫是css画的，眼睛会跟着鼠标转动，当填写密码的时候，熊猫会把登录框举起来，遮住眼睛。

熊猫是css画的，每一个部分都是，真的是直呼666

/* 开始画熊猫 */
.panda{/* 相对定位 */position: relative;width: 200px;
}
/* 脸部 */
.face{width: 200px;height: 200px;background-color: #fff;border-radius: 100%;box-shadow: 0 10px 15px rgba(0,0,0,0.15);position: relative;z-index: 1;
}
/* 耳朵 */
.ear{width: 70px;height: 70px;background-color: #000;border-radius: 100%;position: absolute;top: -10px;
}
.ear.right{right: 0;
}
/* 黑眼圈 */
.eye-shadow{width: 50px;height: 80px;background-color: #000;border-radius: 50%;/* 绝对定位 */position: absolute;top: 40px;
}
.eye-shadow.left{transform: rotate(45deg);left: 30px;
}
.eye-shadow.right{transform: rotate(-45deg);right: 30px;
}
/* 眼白 */
.eye-white{width: 30px;height: 30px;background-color: #fff;border-radius: 100%;position: absolute;top: 68px;
}
.eye-white.left{left: 38px;
}
.eye-white.right{right: 38px;
}
/* 眼球 */
.eye-ball{width: 20px;height: 20px;background-color: #000;border-radius: 100%;position: absolute;left: 5px;top: 5px;
}
/* 鼻子 */
.nose{width: 35px;height: 20px;background-color: #000;position: absolute;left: 0;right: 0;margin: auto;bottom: 65px;border-radius: 42px 42px 60px 60px / 30px 30px 60px 60px;
}
/* 嘴巴 */
.mouth{width: 68px;height: 25px;border-bottom: 7px solid #000;border-radius: 50%;position: absolute;left: 0;right: 0;margin: auto;bottom: 35px;
}
/* 身体 */
.body{width: 250px;height: 280px;background-color: #fff;position: relative;left: -25px;top: -10px;border-radius: 100px 100px 100px 100px / 126px 126px 96px 96px;box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
/* 脚 */
.foot{width: 82px;height: 120px;background-color: #000;position: absolute;bottom: 8px;z-index: 3;border-radius: 40px 40px 35px 40px / 26px 26px 63px 63px;box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
.foot.left{left: -80px;
}
.foot.right{right: -80px;transform: rotateY(180deg);
}
/* 脚掌-大椭圆 */
.foot::after{content: "";width: 55px;height: 65px;background-color: #222;position: absolute;border-radius: 50%;left: 0;right: 0;margin: auto;bottom: 10px;
}
/* 脚掌-三个小椭圆 */
.foot .sole,
.foot .sole::before,
.foot .sole::after{width: 20px;height: 30px;background-color: #222;position: absolute;border-radius: 50%;left: 0;right: 0;margin: auto;top: 8px;
}
.foot .sole::before{content: "";left: -50px;
}
.foot .sole::after{content: "";left: 25px;
}
/* 手 */
.hand,
.hand::before,
.hand::after{width: 40px;height: 30px;background-color: #000;border-radius: 50px;position: absolute;top: 70px;left: -20px;
}
.hand::before{content: "";top: 16px;left: 0;
}
.hand::after{content: "";top: 32px;left: 0;
}
.hand.right{right: -20px;left: auto;
}

登录框往上举起是用的css动画

/* 登录框向上举 */
.up{transform: translate(-50%,-180px);
}

动作交互也非常的简单，用的jquery

$('#password').focusin(function(){// 密码框选中$('.login-box').addClass('up');
}).focusout(function(){// 密码框非选中$('.login-box').removeClass('up');
})
// 眼球移动
$(document).on('mousemove',function(e){let dw=$(document).width() / 10;let dh=$(document).height() / 18;let x=e.pageX / dw;let y=e.pageY / dh;$('.eye-ball').css({left:x,top:y})
})

原git地址：YanH/html_css_demo - Gitee.com

分享一个会遮掩的吊炸天登录页面相关推荐

如何在vscode中设置一个狂炫酷霸吊炸天的背景图片
1.首先在vscode的左边栏扩展(快捷键Ctrl+shift+x)中,找到 background 这个插件,就是下图1这个萌妹纸图标的插件: 图1 仙人指路:遇到一些陌生的插件,细读它的细节.功能贡 ...
Sublime Text 3设置吊炸天PHP开发环境
[原创]Sublime Text 3设置吊炸天PHP开发环境 @heiyeluren @created: 2016/5/31 @last modify: 2016/7/8 1. 下载安装Sublime ...
分享一个B端产品体验报告
下面是我们学员(微信昵称:西星)写的一份关于B端产品体验报告,分享给大家,欢迎小伙伴提意见,下面开始正文: 1. 产品概述 1.1 体验环境系统版本:windows7 软件版本:JIRA v7.1. ...
吊炸天，Spring Security还有这种用法
在用Spring Security项目开发中,有时候需要放通某一个接口时,我们需要在配置中把接口地址配置上,这样做有时候显得麻烦,而且不够优雅.我们能不能通过一个注解的方式,在需要放通的接口上加上该注 ...
大数据不是你想有就能有，如何才能“狂拽炫酷吊炸天”
如今,大数据正成为了各大企业都争相推拥的热词,其发展的如火如荼,迅疾如风,猛烈似火.从互联网领域的BAT到各类智能硬件,几乎所有的企业都正在谈大数据. 在这样一股大数据的洪流之下,专门做大数据分析的公 ...
京东电器“220V带电新人类”：找寻狂拽炫酷吊炸天的科技感
忽如一夜春风来,进入2018年,各大电商公司开的实体店已蔚然成风,遍地开花之下,究竟这些实体店有何魅力吸引到用户?各家到底做得如何? 没有体验就没有发言权. 于是乎,就在昨日(10月27日),北京市朝 ...
如何避免贫穷和忙碌，在2018年你需要这样提升自己 2018年01月07日 00:00:00 2099 热文导读 | 点击标题阅读 Java和Android架构2017年总结：文章精选吊炸天！74
如何避免贫穷和忙碌,在2018年你需要这样提升自己 2018年01月07日 00:00:00 2099 热文导读 | 点击标题阅读 Java和Android架构2017年总结:文章精选吊炸天!74款 ...
python画图小猪佩奇_吊炸天！Python 20秒画出小猪佩奇
原标题:吊炸天!Python 20秒画出小猪佩奇今年社交平台上的带货女王是谁?范冰冰?杨幂?Angelababy?不,是猪猪女孩小猪佩奇. 小猪佩奇在构图基本是各种曲线,类抛物线.类圆.类椭圆.类二 ...
吊炸天！一行命令快速部署大规模K8S集群！！！
吊炸天!一行命令快速部署大规模K8S集群!!! 先决条件请事先准备好几台服务器(测试环境虚拟机即可) 请事先设置好相同的root密码(方便同时操作多服务器) 请事先在Linux安装好docker 请 ...

分享一个会遮掩的吊炸天登录页面

分享一个会遮掩的吊炸天登录页面相关推荐

最新文章

热门文章