css画个熊猫

【html源码-一键复制查看效果】

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.box {
				position: relative;
				width: 300px;
				height: 260px;
				background-color: #55ff7f;
				border-radius: 20%;
				margin: 10% auto 5%;
				transition: all 0.6s;
			}

			.box:hover {
				transform: scale(1.2);
			}

			.headBox {
				position: relative;
				z-index: 5;
				width: 280px;
				height: 250px;
				border-radius: 300px;
				background-color: #fff;
				transform: rotate(-15deg);
			}

			.e1 {
				position: absolute;
				top: 30px;
				left: -25px;
				z-index: 1;
				width: 90px;
				height: 90px;
				border-radius: 50%;
				background-color: #000;
				transform: rotate(45deg);
			}

			.e2 {
				position: absolute;
				top: -20px;
				left: 174px;
				z-index: 1;
				width: 90px;
				height: 90px;
				border-radius: 50%;
				background-color: #000;
				transform: rotate(45deg);
			}

			.eye1 {
				position: absolute;
				top: 95px;
				left: 174px;
				z-index: 1;
				width: 73px;
				height: 75px;
				/* 不规则的圆形写法 */
				border-radius: 40% 60% 48% 52% / 50% 61% 39% 50%;
				background-color: #000;
				transform: rotate(-6deg);
			}

			.eye2 {
				position: absolute;
				top: 110px;
				left: 45px;
				z-index: 1;
				width: 73px;
				height: 75px;
				border-radius: 66% 34% 48% 52% / 60% 54% 46% 40%;
				background-color: #000;
				transform: rotate(20deg);
			}

			.y {
				position: absolute;
				top: 41px;
				left: 18px;
				z-index: 1;
				width: 40px;
				height: 10px;
				border: 4px solid #fff;
				border-radius: 50% 50% 0 0 / 100% 100% 0 0;
				border-bottom: none;
				transform: rotate(-23deg);
			}

			.nose {
				position: absolute;
				top: 175px;
				left: 135px;
				z-index: 1;
				width: 40px;
				height: 25px;
				border-radius: 50%;
				background-color: #000;
			}

			.mouth {
				position: absolute;
				top: 205px;
				left: 137px;
				z-index: 1;
				width: 40px;
				height: 20px;
				/* 半圆线条 */
				border: 1px solid black;
				border-radius: 0 0 50% 50%/0 0 100% 100%;
				border-top: none;
			}
		</style>
	</head>
	<body>
		<div class="box"> <!-- 耳朵 -->
			<div class="e1"></div>
			<div class="e2"></div> <!-- 头 -->
			<div class="headBox"> <!-- 眼睛 -->
				<div class="eye1">
					<div class="y"></div>
				</div>
				<div class="eye2">
					<div class="y"></div>
				</div> <!-- 鼻子 -->
				<div class="nose"></div> <!-- 嘴巴 -->
				<div class="mouth"></div>
			</div>
		</div>
	</body>
</html>
相关推荐
listhi5202 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
一点一木2 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊2 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost2 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns3 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
专注前端30年3 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化
烛阴4 小时前
Lua世界的基石:变量、作用域与七大数据类型
前端·lua
张拭心4 小时前
“不卷 AI、不碰币、下班不收消息”——Android 知名技术大牛 Jake Wharton 的求职价值观
android·前端·aigc
SoaringHeart4 小时前
Flutter疑难解决:单独让某个页面的电池栏标签颜色改变
前端·flutter
Yeats_Liao4 小时前
Go Web 编程快速入门 13 - 部署与运维:Docker容器化、Kubernetes编排与CI/CD
运维·前端·后端·golang