css实现超有趣的熊猫登录界面

利用css实现带有熊猫背景的登录界面，输入密码时熊猫会把输入框向上举起遮住眼睛

效果图：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title></head><style type="text/css">* {/* 初始化 */margin: 0;padding: 0;}body {/* 100%窗口高度 */height: 100vh;/* 弹性布局 水平+垂直居中 */display: flex;justify-content: center;align-items: center;/* 渐变背景 */background: linear-gradient(200deg, #37e2b2, #2fa080);}/* 开始画熊猫 */.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;}/* 登录框 */.login-box {width: 400px;height: 300px;background-color: #fff;border-radius: 3px;box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);position: absolute;left: 50%;top: 50%;transform: translate(-50%, -110px);z-index: 2;/* 弹性布局 居中 垂直排列 */display: flex;justify-content: center;align-items: center;flex-direction: column;/* 设置过渡 */transition: 0.3s;}h1 {color: #1dc797;font-weight: normal;margin-bottom: 5px;}.ipt-box {width: 80%;margin-top: 25px;position: relative;}.ipt-box input {width: 100%;height: 35px;border: none;border-bottom: 1px solid #bbb;text-indent: 5px;outline: none;transition: 0.3s;}.ipt-box label {position: absolute;left: 5px;top: 5px;font-size: 14px;color: #888;transition: 0.3s;pointer-events: none;}/* 输入框选中或有值时输入框的样式 */.ipt-box input:focus,.ipt-box input:valid {border-color: #1dc797;box-shadow: 0 1px #1dc797;}/* 输入框选中或有值时label的样式 */.ipt-box input:focus~label,.ipt-box input:valid~label {color: #1dc797;font-size: 12px;transform: translateY(-15px);}button {width: 150px;height: 40px;background-color: #1dc797;border: none;border-radius: 3px;margin-top: 30px;color: #fff;letter-spacing: 10px;text-indent: 10px;cursor: pointer;transition: 0.3s;}button:hover {letter-spacing: 25px;text-indent: 25px;background-color: #2fa080;}/* 登录框向上举 */.up {transform: translate(-50%, -180px);}</style><body><div class="container"><div class="panda"><div class="ear left"></div><div class="ear right"></div><div class="face"><div class="eye-shadow left"></div><div class="eye-white left"><div class="eye-ball"></div></div><div class="eye-shadow right"></div><div class="eye-white right"><div class="eye-ball"></div></div><div class="nose"></div><div class="mouth"></div></div><div class="body"></div><div class="foot left"><div class="sole"></div></div><div class="foot right"><div class="sole"></div></div></div><div class="login-box"><div class="hand left"></div><div class="hand right"></div><h1>用户登录</h1><div class="ipt-box"><input type="text" required><label>用户名</label></div><div class="ipt-box"><input type="password" id="password" required><label>密码</label></div><button>登录</button></div></div><script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$('#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})})</script></body>
</html>

原gitee地址:https://gitee.com/wyanhui02/html_css_demo/commit/3f90f262509631ad3fec2b5392b33e4884af4af8gitee地址

css实现超有趣的熊猫登录界面相关推荐

运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
QT学习-超漂亮的软件登录界面模块
开发环境: window10.QT Create5.14.2 封装形式生成动态库,包含.dll文件..a文件.h文件调用方式把dll动态库..a文件.h文件添加进自己的工程,在弹出软件主界面之前 ...
HTML+CSS 小案例响应式自适应登录界面
效果展示 HTML代码 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
青柠起始页样式书写+清新风格登录界面——Html+Css+JavaScript
青柠起始页样式书写--Html+Css+JavaScript 效果展示清新风格登录界面首先是制作青柠其实起始页的html 构思一个结构下面呈现代码 <!-- 作业专用html框架 --&g ...
原生JS熊猫登录注册验证,获取本地存储loaclStroage的用户名
1,熊猫登录界面,通过大量原生CSS和原生JS代码,完成并实现了简单的用户交互,通过获取本地存储空间的用户名,来实现简单的登录效果, 2,判断了用户名输入框和本地存储空间的用户名是否有重复, 解决了注 ...
有趣的HTML实例（七）注册登录界面Ⅱ（css+js）
你知道,有些鸟儿是注定不会被关在牢笼里的,它们的每一片羽毛都闪耀着自由的光辉. --<肖申克的救赎> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编 ...
有趣的HTML实例（十五）注册登录界面（css+js）
我并不是每次吃完饭就看电视,有时我边吃边看电视,生活中有些改变会增加乐趣. --<加菲猫> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编码实现 i ...
纯HTML/CSS实现简易超帅的登录界面【提供完整代码】
前言 ❤️ 我独自走过苍苍茫茫,与你同行才有了光 ❤️ 纯HTML/CSS实现超帅的登录界面(含代码) (1)效果图展示 (2)完整代码演示 (3)图片素材 (4)温馨提醒 (5)总结 (1)效果图展 ...
HTML5+CSS3小实例：不偷看密码的超萌猫头鹰登录界面
实例:不偷看密码的超萌猫头鹰登录界面技术栈:HTML.CSS.jQuery jQuery下载地址:https://www.jb51.net/zt/jquerydown.htm 效果: 源码: < ...

css实现超有趣的熊猫登录界面

利用css实现带有熊猫背景的登录界面，输入密码时熊猫会把输入框向上举起遮住眼睛

效果图：

css实现超有趣的熊猫登录界面相关推荐

最新文章

热门文章