手把手教你使用纯CSS绘制可爱玉兔「附代码」

1.引言

CSS是网页设计中一种很重要的语言，可以让我们实现元素的排列、布局、样式等功能，让网页更加美观。除此之外，CSS也可以进行简单的图形绘制，本文就想和大家分享一下如何使用纯CSS绘制一个可爱的玉兔。

2.绘制玉兔

2.1 玉兔的身体

首先，我们需要绘制玉兔的身体。身体主要就是一个椭圆形，可以通过border-radius属性轻松完成。

.rabbit {
    width: 200px;
    height: 250px;
    border-radius: 100px / 125px;
    background-color: #eee;
}

代码中，我们设置了一个class为rabbit的元素，宽200px，高250px，使用border-radius属性设置了椭圆形。

接下来，我们需要为玉兔添加耳朵和尾巴，这里我们可以使用CSS的伪元素before和after来实现。注意使用绝对定位让它们居中。

.rabbit::before,
.rabbit::after {
    content: '';
    position: absolute;
    background-color: #eee;
}
.rabbit::before {
    width: 50px;
    height: 80px;
    border-radius: 25px / 40px;
    top: -60px;
    left: 50px;
    transform: rotate(-30deg);
}
.rabbit::after {
    width: 40px;
    height: 60px;
    border-radius: 20px / 30px;
    top: 170px;
    left: 40px;
    transform: rotate(-20deg);
}

代码中，我们使用content: ''创建了伪元素，然后设置了它们的宽高、圆角、颜色以及位置。使用transform: rotate让耳朵和尾巴旋转一定角度后更加接近自然形态。

2.2 玉兔的脸部

接下来，我们需要为玉兔添加脸部表情。脸部主要包括眼睛、鼻子和嘴巴。

先来绘制眼睛，眼睛也是使用伪元素实现，由于需要绘制两个眼睛，因此我们需要使用nth-child选择器来分别设置它们的位置。通过设置border-radius属性让眼睛变为圆形，再通过box-shadow属性添加阴影，可以更好的实现细节。

.rabbit::before:nth-child(1) {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    top: 30px;
    left: 75px;
    box-shadow: -5px -5px 0px 0px #222, inset -1px -1px 0px 0px #fff;
}
.rabbit::before:nth-child(2) {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    top: 20px;
    left: 110px;
    box-shadow: -5px -5px 0px 0px #222, inset -1px -1px 0px 0px #fff;
}

接下来是鼻子，同样使用border-radius属性设置为圆形，并设置红色背景色。

.rabbit-nose {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #ee4444;
    position: absolute;
    top: 95px;
    left: 90px;
    z-index: 10;
}

最后是嘴巴。嘴巴可以使用border-radius、box-shadow属性和transform属性实现。我们首先用border-radius将矩形变为圆弧，然后使用box-shadow添加边框和阴影，最后通过transform: rotate让嘴巴旋转到合适的位置。

.rabbit-mouth {
    width: 50px;
    height: 30px;
    border-radius: 50px / 15px;
    background-color: #eee;
    border: 2px solid #222;
    box-shadow: -3px -3px 0px 0px #fff;
    position: absolute;
    top: 125px;
    left: 75px;
    transform: rotate(30deg);
}

3.完整的玉兔代码

最后，将所有代码整合到一起：

.rabbit {
    width: 200px;
    height: 250px;
    border-radius: 100px / 125px;
    background-color: #eee;
    position: relative;
    margin: 50px auto;
}
/*耳朵尾巴*/
.rabbit::before,
.rabbit::after {
    content: '';
    position: absolute;
    background-color: #eee;
}
.rabbit::before {
    width: 50px;
    height: 80px;
    border-radius: 25px / 40px;
    top: -60px;
    left: 50px;
    transform: rotate(-30deg);
}
.rabbit::after {
    width: 40px;
    height: 60px;
    border-radius: 20px / 30px;
    top: 170px;
    left: 40px;
    transform: rotate(-20deg);
}
/*眼睛*/
.rabbit::before:nth-child(1) {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    top: 30px;
    left: 75px;
    box-shadow: -5px -5px 0px 0px #222, inset -1px -1px 0px 0px #fff;
}
.rabbit::before:nth-child(2) {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    top: 20px;
    left: 110px;
    box-shadow: -5px -5px 0px 0px #222, inset -1px -1px 0px 0px #fff;
}
/*鼻子*/
.rabbit-nose {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #ee4444;
    position: absolute;
    top: 95px;
    left: 90px;
    z-index: 10;
}
/*嘴巴*/
.rabbit-mouth {
    width: 50px;
    height: 30px;
    border-radius: 50px / 15px;
    background-color: #eee;
    border: 2px solid #222;
    box-shadow: -3px -3px 0px 0px #fff;
    position: absolute;
    top: 125px;
    left: 75px;
    transform: rotate(30deg);
    z-index: 10;
}

4.总结

本文介绍了使用纯CSS绘制可爱玉兔的方法，我们通过CSS的各种属性和伪元素来实现各个部位。CSS绘制的优点在于可以使用简单的代码完成图形绘制，而且不需要使用其他工具，很适合在网页中应用。同时也需要注意在实际项目中合理使用，尽量少用来完成复杂的图形绘制。