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 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap17 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish24 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
请叫我欧皇i37 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_39 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun1 小时前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali2 小时前
记录一个奇怪的前端布局现象
前端
Json_181790144802 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库