纯css实现一只敲可爱的兔子

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{padding: 0;margin: 0;}body{backgroun...

我是一只蘑菇17

719人浏览 · 2021-12-08 11:40:03

我是一只蘑菇17 · 2021-12-08 11:40:03 发布

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{
			background: rgb(209,180,140);
		}
		.rabit{
			width: 300px;
			height: 300px;
			position: relative;
			margin: 120px auto;
		}
		.head{
			width: 222px;
			height: 213px;
			border-radius: 148px/154px 154px 115px 115px;
			background: linear-gradient(1deg,#e2e2e2 1%,white 16%,white);
			box-shadow: 0 0 2px 0 white;
			position: absolute;
			z-index: 2;
			left: 39px;
			top: 43px;
		}
		.ear{
			width: 65px;
			height: 128px;
			background: white;
			box-shadow: 0 0 2px 0 white;
			border-radius: 53px 53px 65px 65px/53px 53px 254px 254px;
			position: absolute;
			left: 65px;
			top: -49px;
			transform: rotateZ(-24deg);
		}
		.ear.right{
			transform: scale(-1,1) rotateZ(-24deg);
			left: 173px;
			top: -51px;
		}
		.innerear{
			width: 50px;
			height: 100px;
			background: white;
			box-shadow: 0 0 2px 0 white;
			background:linear-gradient(-196deg,#e2e2e2 9%,white);
			border-radius: 53px 53px 65px 65px/53px 53px 254px 254px;
			transform: rotateZ(-24deg);
			position: absolute;
			left: 73px;
			top: -33px;
		}
		.innerear.right{
			transform:scale(-1,1) rotateZ(-24deg);
			left: 179px;
			top: -35px;
		}
		.eye{
			width: 48px;
			height: 6px;
			background:black;
			border-radius: 3px;
			position: absolute;
			left: 65px;
			top: 119px;
			z-index: 3;
			transform: rotate(-2deg);
		}
		.eye.right{
			left: 195px;
			top: 119px;
			transform: rotate(2deg);
		}
		.shy{
			width: 31px;
			height: 5px;
			border-radius: 10px 10px 10px 10px/10px 10px 10px 10px;
			background-image: linear-gradient(135deg, transparent, transparent 45%, #dc3912, transparent 65%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, #dc3912, transparent 65%, transparent 100%);
			background-size: 9px 10px;
			background-repeat: repeat-x;
			background-position: 4px 0;
			position: absolute;
			left: 72px;
			top: 150px;
			z-index: 3;
			transform: rotate(4deg);
			animation: yang 1s infinite alternate;
		}
		.shy.right{
			left: 194px;
			top: 151px;
			transform: rotate(-8deg);
		}
		.mouth{
			width: 16px;
			height: 10px;
			border: 4px solid black;
			border-right: 4px solid black;
			border-bottom: 4px solid black;
			border-left: 4px solid transparent;
			border-top: 4px solid transparent;
			border-radius: 50%;
			transform:scale(-1.2,1)  rotate(43deg);
			position:absolute;
			left: 126px;
			top: 154px;
			z-index: 3;
			animation: luo 1s infinite alternate;
		}
		.mouth.right{
			transform:scale(1.2,1) rotate(43deg);
			position:absolute;
			left: 146px;
			top: 154px;
		}
		.body{
			width: 128px;
			height: 140px;
			box-shadow: 0 0 2px 0 white;
			background:  -webkit-radial-gradient(50% 0%,farthest-side circle,#CDC9C9 2%,white 50%,white);
			position: absolute;
			left: 85px;
			top: 219px;
			z-index: 1;
			border-radius: 0px 0px 53px 54px/0px 0px 53px 53px;
		}
		.arm{
			width: 43px;
			height: 100px;
			box-shadow: 0 0 2px 0 white;
			background:linear-gradient(-66deg,#e2e2e2 18%,white 37%,white);
			border-radius: 120px 120px 280px 280px/120px 120px 800px 800px;
			position: absolute;
			left: 59px;
			top: 225px;
			transform: rotate(25deg);
		}
		.arm.right{
			left: 200px;
			top: 225px;
			background:linear-gradient(66deg,#e2e2e2 8%,white 37%,white);
			transform: rotate(-17deg);
		}
		.leg{
			width: 38px;
		    height: 62px;
		    box-shadow: 0 0 2px 0 white;
		    background: linear-gradient(-66deg,#e2e2e2 18%,white 37%,white);
		    border-radius: 120px 120px 680px 280px/120px 120px 800px 800px;
		    position: absolute;
		    left: 88px;
		    top: 313px;
		    transform: rotate(-3deg);
		}
		.leg.right{
			background: linear-gradient(-66deg,#e2e2e2 18%,white 37%,white);
		    transform: scale(-1,1) rotate(-3deg);
		    left: 173px;
		    top: 313px;
		}
		@keyframes luo{
			form{width: 16px;height: 8px;}
			to{width: 12px;height: 10px;}
		}
		@keyframes yang{
			form{background-position: 4px 0;}
			to{background-position: 12px 0;}
		}
	</style>
</head>
<body>
	<div class="rabit">
		<div class="ear"></div>
		<div class="innerear"></div>
		<div class="ear right"></div>
		<div class="innerear right"></div>
		<div class="eye"></div>
		<div class="eye right"></div>
		<div class="shy"></div>
		<div class="shy right"></div>
		<div class="mouth"></div>
		<div class="mouth right"></div>
		<div class="head"></div>
		<div class="body"></div>
		<div class="arm"></div>
		<div class="arm right"></div>
		<div class="leg"></div>
		<div class="leg right"></div>
	</div>
</body>
</html>