preface

I am participating in the Mid-Autumn Festival creative submission contest, please see juejin.cn/post/700315…

We code poetry first

We, as a new generation of migrant workers, not only technology, but also have romantic feelings, when the literature youth of month when song, life geometry, we is so cool, we low noble head, the in the mind sing rap, roaring, thumb to PC for us sing poetry to make me something (I thumb is not show, knock out bad) : Cloudless mirror Jiuzhou, the most reunion night is Mid-Autumn Festival

Here comes a little rabbit

Far away from us, in the round of the moon, singing poetry, missing distant relatives, whether feel a little lonely, it doesn’t matter, the small jade rabbit came, and it will also shake the ear to us say hi, “rabbit rabbit so lovely, want to steamed, or braise?”

Let’s take a look at the renderings white

The pink

gray

. Too many, you can follow your mood, tall, short, fat, thin, their own Settings oh

Nonsense not much, my directory structure

In the code

The HTML file

<! DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Rabbit</title> <link href='./css/new_file.css' rel="stylesheet"type="text/css"/> </head> <body> <div class="rabbit"> <div class="rabbit__leg rabbit__leg--one"> </div> <div class="rabbit__leg rabbit__leg--two"> </div>  <div class="rabbit__tail"> </div> <div class="rabbit__body"> </div> <div class="rabbit__leg rabbit__leg--three"> </div>  <div class="rabbit__leg rabbit__leg--four"> </div> <div class="rabbit__ear rabbit__ear--right"> </div> <div class="rabbit__head"> </div> <div class="rabbit__ear rabbit__ear--left"> </div> </div> </body> </html>Copy the code

CSS file (the core of the bunny)

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	background: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

.rabbit {
    /*在行下面修改代码*/
    
	--rabbit-basecolor: gray;
	
	/*在行上面修改代码*/
	position: relative;
}

.rabbit .rabbit__body {
	width: 4em;
	height: 5.6em;
	background: #F4F4F4;
	border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
	-webkit-transform: rotate(-100deg);
	transform: rotate(-40deg);
	box-shadow: inset -2.3em -2.7em 0 0 var(--rabbit-basecolor);
}

.rabbit .rabbit__head {
	position: absolute;
	width: 4em;
	height: 4.6em;
	top: -2.5em;
	left: -2em;
	background: var(--rabbit-basecolor);
	border-radius: 50% 50% 50% 50%/65% 60% 40% 35%;
	-webkit-transform: rotate(-120deg);
	transform: rotate(-120deg);
	overflow: hidden;
}

.rabbit .rabbit__head:before {
	content: "";
	position: absolute;
	width: 0.65em;
	height: 0.5em;
	top: -0.1em;
	left: 1.8em;
	background: #F97996;
	border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
	-webkit-transform: rotate(130deg);
	transform: rotate(130deg);
}

.rabbit .rabbit__head:after {
	content: "";
	position: absolute;
	width: 1em;
	height: 1em;
	top: 1.5em;
	left: 1.6em;
	background: #F4F4F4;
	border-radius: 50%;
	box-shadow: inset 0.1em 0.15em 0 0.37em #3D261C;
}

.rabbit .rabbit__ear {
	position: absolute;
	border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

.rabbit .rabbit__ear--left {
	width: 2.2em;
	height: 4.7em;
	top: -5.7em;
	left: -0.2em;
	background: #F3E3DE;
	-webkit-transform: rotate(40deg);
	transform: rotate(40deg);
	box-shadow: inset 0.3em -0.4em 0 -0.1em var(--rabbit-basecolor);
	-webkit-animation: ear-left 5s infinite ease-out;
	animation: ear-left 5s infinite ease-out;
}

.rabbit .rabbit__ear--right {
	width: 2em;
	height: 4.7em;
	top: -5.5em;
	left: -0.7em;
	background: var(--rabbit-basecolor);
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
	-webkit-animation: ear-right 5s infinite ease-out;
	animation: ear-right 5s infinite ease-out;
}

.rabbit .rabbit__leg {
	position: absolute;
}

.rabbit .rabbit__leg--one {
	width: 0.8em;
	height: 3em;
	top: 2.3em;
	left: 0.2em;
	background: var(--rabbit-basecolor);
	border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transform: rotate(15deg);
	transform: rotate(15deg);
}

.rabbit .rabbit__leg--one:before {
	content: "";
	position: absolute;
	width: 0.8em;
	height: 0.5em;
	top: 2.6em;
	left: -0.2em;
	background: var(--rabbit-basecolor);
	border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
	-webkit-transform: rotate(-10deg);
	transform: rotate(-10deg);
}

.rabbit .rabbit__leg--three {
	width: 0.9em;
	height: 3em;
	top: 2.4em;
	left: 0.7em;
	background: var(--rabbit-basecolor);
	border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
}

.rabbit .rabbit__leg--three:before {
	content: "";
	position: absolute;
	width: 0.8em;
	height: 0.5em;
	top: 2.6em;
	left: -0.2em;
	background: var(--rabbit-basecolor);
	border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
	-webkit-transform: rotate(-10deg);
	transform: rotate(-10deg);
}

.rabbit .rabbit__leg--two {
	width: 2.6em;
	height: 3.6em;
	top: 1.7em;
	left: 1.6em;
	background: var(--rabbit-basecolor);
	border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
}

.rabbit .rabbit__leg--two:before {
	content: "";
	position: absolute;
	width: 1.6em;
	height: 0.8em;
	top: 3.05em;
	left: 0em;
	background: var(--rabbit-basecolor);
	border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
	-webkit-transform: rotate(-10deg);
	transform: rotate(-10deg);
}

.rabbit .rabbit__leg--four {
	width: 2.6em;
	height: 3.6em;
	top: 1.8em;
	left: 2.1em;
	background: var(--rabbit-basecolor);
	border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
}

.rabbit .rabbit__leg--four:before {
	content: "";
	position: absolute;
	width: 1.6em;
	height: 0.8em;
	top: 3.05em;
	left: 0em;
	background: var(--rabbit-basecolor);
	border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
	-webkit-transform: rotate(-10deg);
	transform: rotate(-10deg);
}

.rabbit .rabbit__tail {
	position: absolute;
	width: 0.9em;
	height: 0.9em;
	top: 3.7em;
	left: 4em;
	background: var(--rabbit-basecolor);
	-webkit-transform: rotate(25deg);
	transform: rotate(25deg);
}

.rabbit .rabbit__tail:after, .rabbit .rabbit__tail:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--rabbit-basecolor);
	border-radius: 50%;
}

.rabbit .rabbit__tail:before {
	top: 0;
	left: -50%;
}

.rabbit .rabbit__tail:after {
	top: 50%;
	left: 0;
}

@-webkit-keyframes ear-left {
	0%, 20%, 100% {
		-webkit-transform: rotate(40deg);
		transform: rotate(40deg);
	}

	10%, 30%, 80% {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	90% {
		-webkit-transform: rotate(50deg);
		transform: rotate(50deg);
	}
}

@keyframes ear-left {
	0%, 20%, 100% {
		-webkit-transform: rotate(40deg);
		transform: rotate(40deg);
	}

	10%, 30%, 80% {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	90% {
		-webkit-transform: rotate(50deg);
		transform: rotate(50deg);
	}
}

@-webkit-keyframes ear-right {
	0%, 20%, 100% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}

	10%, 30%, 80% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	}

	90% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@keyframes ear-right {
	0%, 20%, 100% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}

	10%, 30%, 80% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	}

	90% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}
Copy the code

All right, hurry up with your own rabbit, enjoy the moon

Familiar with my people know that I am a blueprint maniacal, I do not have a long gun to shoot the moon, but know the photography tycoon will ah, he is very generous to lend me a few pictures, to let us enjoy the moon

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Mid-Autumn Festival activity — let’s read a poem together with the little Jade Rabbit

preface

We code poetry first

Here comes a little rabbit

Mid-Autumn Festival activity — let’s read a poem together with the little Jade Rabbit

preface

We code poetry first

Here comes a little rabbit

Related Posts

Five handy CSS functions

Quick start Promise in JavaScript

Record web page compatibility problems