Bagaimana untuk melukis arnab jed yang comel menggunakan CSS tulen? Artikel berikut akan mengajar anda cara melukis arnab jed yang comel menggunakan CSS tulen Saya harap ia akan membantu semua orang!
Berikut ialah cerita pendek untuk mempopularkan sains dengan anda:
Arnab Jade pada asalnya Hou Yi Kerana Chang'e terbang ke bulan dan terlepas Hou Yi, Hou Yi Untuk bersama Chang'e, Yi sanggup bertukar menjadi haiwan kecil kegemarannya - Arnab Jade Malangnya, Chang'e tidak pernah tahu bahawa Arnab Jade adalah Hou Yi yang dia rindui siang dan malam!
Izinkan saya membawa anda untuk menyedari arnab kecil yang comel.
Rendering Jade Rabbit:
html Tag
<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>
letak letak css
* {
padding: 0;
margin: 0;
}
body {
background: rgb(38, 44, 56);
}
/* 大盒子 */
.rabit {
width: 300px;
height: 300px;
position: relative;
margin: 120px auto;
}kepala
.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 0 2px 0 rgb(255, 192, 236);
position: absolute;
z-index: 2;
left: 39px;
top: 43px;
}telinga
/* 耳朵 */
.ear {
width: 65px;
height: 128px;
background: rgb(255, 192, 236);
box-shadow: 0 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);
}
/* 右耳 */
.ear.right {
transform: scale(-1, 1) rotateZ(-24deg);
left: 173px;
top: -51px;
}
/* 耳朵阴影 */
.innerear {
width: 50px;
height: 100px;
background: rgb(255, 192, 236);
box-shadow: 0 0 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;
}
/* 右面阴影 */
.innerear.right {
transform: scale(-1, 1) rotateZ(-24deg);
left: 179px;
top: -35px;
}Mata
/* 眼睛 */
.eye {
width: 48px;
height: 6px;
background: rgb(0, 0, 0);
border-radius: 3px;
position: absolute;
left: 65px;
top: 119px;
z-index: 3;
transform: rotate(-2deg);
}
/* 右边眼睛 */
.eye.right {
left: 195px;
top: 119px;
transform: rotate(2deg);
}Titik Pemalu
/* 害羞圆 */
.shy {
width: 31px;
height: 25px;
border-radius: 50%;
background-color: #e9a998;
position: absolute;
left: 85px;
top: 140px;
z-index: 3;
}
/* 右边害羞圆 */
.shy.right {
left: 184px;
top: 141px;
transform: rotate(-8deg);
}Mulut
/* 嘴 */
.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;
}
/* 嘴右边 */
.mouth.right {
transform: scale(1.2, 1) rotate(43deg);
position: absolute;
left: 146px;
top: 180px;
}Perut
.body {
width: 128px;
height: 140px;
box-shadow: 0 0 2px 0 rgb(255, 255, 255);
background: -webkit-radial-gradient(50% 0%, 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;
}Lengan
/* 手 */
.arm {
width: 43px;
height: 100px;
box-shadow: 0 0 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);
}
/* 右手 */
.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;
}
}Kaki
/* 腿 */
.leg {
width: 38px;
height: 62px;
box-shadow: 0 0 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);
}
/* 右腿 */
.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;
}Bukankah ia sangat mudah? Adakah anda telah mencapainya!
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !
Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara melukis arnab jed yang comel menggunakan CSS tulen (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
