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>
相关推荐
超人不会飛4 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦7 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想10 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z18 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982424 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴29 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干32 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗34 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder39 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder42 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github