css画个熊猫 - 技术栈

css画个熊猫
刘重洋2024-08-30 7:01
【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>