如何使用纯CSS绘制可爱玉兔

这篇文章给大家分享的是有关如何使用纯CSS绘制可爱玉兔的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

玉兔效果图：

实现代码：

html标签

css布局

* {                padding: 0;                margin: 0;        }        body {                background: rgb(38, 44, 56);        }                /* 大盒子 */        .rabit {                width: 300px;                height: 300px;                position: relative;                margin: 120px auto;        }

头

.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;        }

耳朵

 /* 耳朵 */        .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;        }

眼睛

/* 眼睛 */        .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);        }

害羞圆点

/* 害羞圆 */        .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);        }

嘴巴

/* 嘴 */        .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;        }

肚子

.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;        }

手臂

/* 手 */        .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;                }        }

腿

  /* 腿 */        .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;        }

感谢各位的阅读！关于"如何使用纯CSS绘制可爱玉兔"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！