How to draw lovely Jade Rabbit with Pure CSS
This article is about how to use pure CSS to draw cute jade rabbits. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
Effect picture of Jade Rabbit:
Implementation code:
Html tag
Css layout
* {padding: 0; margin: 0;} body {background: rgb (38,44,56);} / * Big Box * / .rabit {width: 300px; height: 300px; position: relative Margin: 120px auto;}
Head
Head {width: 222px; height: 213px; border-radius: 50%; background: linear-gradient (1deg, # e2e2e2 1%, rgb (255,192,236) 16%, rgb (255,192,236)); box-shadow: 0 2px 0 rgb (255,192,236); position: absolute Z-index: 2; left: 39px; top: 43px;}
Ear
/ * ear * / .ear {width: 65px; height: 128px; background: rgb (255,192,236); box-shadow: 0 2px 0 rgb (255,192,236); border-radius: 80px 80px 65px 65px/53px 53px 254px 254px; position: absolute; left: 65px Top:-49px; transform: rotateZ (- 24deg);} / * right ear * / .ear.right {transform: scale (- 1,1) rotateZ (- 24deg); left: 173px; top:-51px } / * ear Shadow * / .innerear {width: 50px; height: 100px; background: rgb (255,192,236); box-shadow: 00 2px 0 rgb (255,192,236); background: linear-gradient (- 196deg, # e2e2e2 9%, rgb (255,192,236)) Border-radius: 80px 80px 65px 65px/53px 53px 254px 254px; transform: rotateZ (- 24deg); position: absolute; left: 73px; top:-33px;} / * right shadow * / .innerear.right {transform: scale (- 1,1) rotateZ (- 24deg) Left: 179px; top:-35px;}
Eye
/ * width {eye: 48px; height: 6px; background: rgb (0,0,0); border-radius: 3px; position: absolute; left: 65px; top: 119px; z-index: 3 Transform: rotate (- 2deg);} / * right eye * / .eye.right {left: 195px; top: 119px; transform: rotate (2deg);}
Shy dots
/ * shy circle * / .shy {width: 31px; height: 25px; border-radius: 50%; background-color: # e9a998; position: absolute; left: 85px; top: 140px; z-index: 3 } / * right shyness circle * / .shy.right {left: 184px; top: 141px; transform: rotate (- 8deg);}
Mouth
/ * mouth * / .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: 180px; z-index: 3;} / * right of mouth * / .mouth.right {transform: scale (1.2,1) rotate (43deg); position: absolute Left: 146px; top: 180px;}
Stomach
Body {width: 128px; height: 140px; box-shadow: 0 2px 0 rgb (255,255,255); background:-webkit-radial-gradient (50%, farthest-side circle, # CDC9C9 2%, rgb (255,192,236) 50%, rgb (255,192,236)); position: absolute; left: 85px Top: 219px; z-index: 1; border-radius: 0px 0px 53px 54px/0px 0px 53px 53px;}
Arm
/ * hand * / .arm {width: 43px; height: 100px; box-shadow: 00 2px 0 rgb (255,192,236); background: linear-gradient (- 66deg, # e2e2e2 18%, rgb (255,192,236) 37%, rgb (255,192,236)); border-radius: 120px 120px 280px 280px/120px 120px 800px 800px Position: absolute; left: 59px; top: 225px; transform: rotate (25deg);} / * right hand * / .arm.right {left: 200px; top: 225px Background: linear-gradient (66deg, # e2e2e2 8%, rgb (255,192,236) 37%, rgb (255,192,236)); transform: rotate (- 17deg); animation: hop 2s linear infinite;} @ keyframes hop {20% {transform: rotate (- 40deg) translateX (18px) Box-shadow:-0.2em 1em 0-1em # 333;}}
Leg
/ * leg * / .leg {width: 38px; height: 62px; box-shadow: 00 2px 0 rgb (255,192,236); background: linear-gradient (- 66deg, # e2e2e2 18%, rgb (255,192,236) 37%, rgb (255,192,236)); border-radius: 120px 120px 680px 280px/120px 120px 800px 800px Position: absolute; left: 88px; top: 313px; transform: rotate (- 3deg);} / * right leg * / .leg.right {background: linear-gradient (- 66deg, # e2e2e2 18%, rgb (255,192,236) 37%, rgb (255,192,236)) Transform: scale (- 1,1) rotate (- 3deg); left: 173px; top: 313px;} Thank you for reading! On "how to use pure CSS to draw lovely Jade Rabbit" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!
