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>
相关推荐
拾光拾趣录2 分钟前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权2 分钟前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598243 分钟前
vue3源码解析:调度器
前端·vue.js
Dolphin_海豚26 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件28 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown1 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易1 小时前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员