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

最新推荐文章于 2023-11-02 01:01:29 发布
最新推荐文章于 2023-11-02 01:01:29 发布
阅读量576 收藏 7
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54366356/article/details/124014718
版权

利用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地址

Eason_Lou
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML+CSS+JS 熊猫登录表单
正在创作系列：【若冰说CSS】
06-01 802
实现了一个可爱的熊猫登录界面，页面背景使用了渐变色，熊猫的头部和身体使用了圆形和椭圆形的边框，使用了CSS的伪元素和阴影效果来实现熊猫的手和脚。登录框使用了flex布局，包括用户名和密码的输入框和登录按钮，使用了CSS的过渡效果和伪类来实现输入框的动态效果。整个页面使用了响应式布局，可以适应不同大小的屏幕。
可爱的熊猫遮眼登录页面
06-01
这是一款可爱的熊猫遮眼登录页面演示，不输入密码的时候熊猫的眼睛会跟随鼠标转动，而输入密码的时候熊猫会遮住自己的眼睛，表表示不看用的的密码。
jQuery熊猫遮眼登录框代码
07-24
jQuery熊猫遮眼登录框代码是一款基于jQuery+CSS3绘制的卡通可爱熊猫遮眼登录页面实例，熊猫的眼睛会跟随鼠标移动转动，输入密码的时候熊猫会遮住自己的眼睛，安全输入密码表单验证效果。
jQuery熊猫遮眼动画登录模板
12-04
jQuery熊猫遮眼动画登录模板
jquery熊猫动画登录页面
ICode联盟
04-29 95
下载地址 很有创意的login页面，基于jquery实现的熊猫动画登录页面。 dd:
分享一个好玩的登陆页面
qq_46266925的博客
03-24 255
一个d炸天的登陆页面
动态html登录界面
qq_45179408的博客
12-12 1611
动态html登录界面
android安卓源码海量项目合集打包-1
热门推荐
chenhao0568的专栏
06-11 13万+
下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar │ │ Android 实现 标签 拖动 改变位置.rar │ │ android 流式布局和热门标签.zip │ │ ...
分享996个实用的JavaScript特效你要的全在这里
猎人村庄的博客
05-29 4593
链接:https://pan.baidu.com/s/1eL8ASFY7BGiIrVXCtgPzgQ 密码:rbqo 我就不信没有你想要的。996个好看且实用的JavaScript特效，总有一款适合你，小弟在某付费网站上收集的，虽然不是我的原创但是小弟这996个Js也是花了很多时日！下面是JS的名字，我放了一些图片，所有图片全都放进去是不行的996个图太多，大家下载后可以看到。 css3聚光灯射线旋转动画特效 js圆形虚线指针时钟特效 HTML5 Canvas透明气泡动画特效 jedate选择一年范围.
HTML5+CSS3 精美登陆界面源码
01-19
在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新特性与CSS3的动画效果，以提供卓越的用户体验。 首先，我们来详细了解一下HTML5。HTML5是超文本标记...
js+css实现的仿office2003界面
10-31
JS+CSS实现的仿Office2003界面 JS+CSS实现的仿Office2003界面是使用JavaScript和CSS技术来实现的一个仿Office2003风格的界面。在这个示例中，我们可以看到作者使用了JavaScript和CSS来实现了一个仿Office2003的工具...
HTML5+CSS3炫酷的手机登陆界面
08-10
7. 响应式设计：利用 `media queries` 实现根据不同设备特性调整界面布局。 在“HTML5+CSS3炫酷的手机登录界面”这个项目中，开发者可能还运用了其他高级特性，如Web字体服务（@font-face）、自定义属性（CSS变量）...
微信小程序资源汇总
Vincentyun
08-20 1万+
微信小程序汇总（10月16日更新小程序100+个教程或资讯与50+个Demo） 1：微信小程序官方工具：https://mp.weixin.qq.com/debug/w … tml?t=1476434678461 2：微信小程序简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3：微信小程序设计指南：http...
用CSS-doodle制作炫酷的登录界面
最新发布
Emporor的博客
11-02 400
CSS-doodle是一个基于CSS的绘图库，它可以让我们使用纯CSS代码来绘制各种图形。通过CSS-doodle，我们可以实现许多以前只能通过图片或者JavaScript来实现的效果，而且更加简洁、高效。
echarts使用getZr()点击事件获取柱状图数据
weixin_54366356的博客
05-27 7730
echarts柱状图精确点击事件传参 先上效果图！！！ 当柱状图数据较少的时候，直接点击柱子不好点击，使用getZr()此种方法可以点击柱子所在的这一列（阴影部分），即可拿到对应数据 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
使用Vue循环input输入框的取值问题
weixin_54366356的博客
12-23 6973
使用Vue循环input输入框的取值问题 使用Vue循环生成input输入框时如何动态绑定v-model ? 相信大家使用Vue动态循环生成input输入框时可能遇到过如下问题： Vue通过v-for可便捷的生成DOM结构，但循环input时会有一个v-model的属性，要通过v-model取值，便要为它动态绑定一个字段，而此时我们又不好在Vue的data属性中提前定义好input中v-model所需的字段，到这一步相信很多同学都放弃使用v-for循环生成input了，还是老老实实的使用js拼接字符串吧
table表格固定表头
weixin_54366356的博客
06-04 5966
table表格内容过多时会出现滚动，若不固定表头的话，当滚动到下方时即看不见每一列所对应的标题，影响用户体验！ 废话不多说，直接上代码！！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
layui表单动态赋值与取值
weixin_54366356的博客
12-20 5724
layui表单
使用html和css实现登陆界面
04-11
登陆界面可以分为两个部分：登陆表单和背景。 首先，我们来实现登陆表单的HTML代码： ```html <h2>Login Username: Password: <button type="submit">Login ``` 接下来，我们来给登陆表单...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值