我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

此时此刻无论您在哪里，都请接受我们的祝福，在这中华民族一年一度的新春佳节即将来临之时，给您拜年啦！转眼间新的一年到来，送走2022，迎接2023。闲来无事利用学过的知识，手撸一个兔子，css实现小白兔，说起兔年，让我想起来儿时一首儿歌，让我们一起回忆一下，...小白兔白又白,两只耳朵拿起来,洗了洗,剥了皮,剁成块,放在锅中炖起来。加上水,盖一盖,出锅之前放料理。(谁知道兔子啥味?)哈哈哈。。。进入正题，实现一只兔子，先看效果图。

实现

接下来我带领大家实现一只小兔子，首先这个兔子需要什么结构，我们先拆分开，一个一个去解决，现实生活中，当我们遇到事情，首先要先冷静下来去分析问题，制定详细的步骤，一步一步的去实践落实，方能有理有条的去完成这件事，扯远了，回归正题，画一个兔子我们需要，脸、耳朵、鼻子、眼睛、嘴巴、害羞晒红，首先我们先写HTML部分代码，代码都有备注，大家可以参考一下，这里就不一一细说html代码了。

<!-- 兔子 -->
<div class="rabbit">
    <!-- 耳朵 -->
    <div class="rabbitEarsLeft"></div>
    <div class="rabbitEarsRight"></div>
    <!-- 五官 -->
    <div class="fiveSenses">
            <!-- 眼睛 -->
            <div class="left-eye"></div>
            <div class="right-eye"></div>
            <!-- 鼻子 -->
            <div class="nose"></div>
            <!-- 嘴巴 -->
            <div class="mouth">
                <div class="mouths"></div>
                <div class="mouths"></div>
            </div>
    </div>
</div>

首先，先说一下脸怎么画，脸我用的是一个椭扁圆代替脸部，自然利用css里border-radius就可以很轻松的绘画出一个椭扁圆，代码很简单，(border-radius属性定义及使用说明border-radius允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆)。具体代码如下：

        border-radius: 40vh 40vh 20vh 20vh;
    }

接下来，我们说一下眼睛，眼睛很简单就是两个圆绘制，背景填为黑色，通过border-radius变为圆，通过background改变颜色，具体代码如下：

/* 眼睛 */
.left-eye,
.right-eye {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    background: #000;
}

接着说一下鼻子，鼻子也是用border-radius进行设置，背景色依旧为黑色,具体代码如下：

.nose {
        border-radius: 40% 40% 50% 50% / 40% 40% 50% 50%;
        background: black;
        width: 8vh;
        height: 9vh;
}

接下来我们说一下兔嘴巴，兔嘴巴我是考虑用两个弧线拼接而成，有种兔子微笑的感觉，喜庆，这里我们依旧用的了border-radius进行设置曲线效果，代码如下：

.mouths{
    width: 6vh;
    height: 4vh;
    border-bottom: 2px solid #000;
    border-radius: 57% 43% 51% 49% / 34% 32% 68% 66%;
}

最后一步，我们说一下兔子的耳朵，这里我们用到了::after# 伪元素,(定义和说明 :after 选择器向选定元素的最后子元素后面插入内容),椭圆我们依旧用的border-radius进行实现，代码如下

/* 耳朵 */
.rabbitEarsLeft,
.rabbitEarsRight {
        width: 18vh;
        height: 36vh;
        border: 0.5vh solid #000;
        border-radius: 50% 50% 30% 30%;
}
.rabbitEarsLeft::after,
.rabbitEarsRight::after {
        content: "";
        width: 8vh;
        height: 24vh;
        border: 0.5vh solid #000;
        background: #000;
        border-radius: 50%;
}

兔年到，好运到，家家户户，闹元宵，新的一年，大展宏图，希望大家兔年快乐，新年新气象，多努力，多学习，更加进一步，2023请善待我，冲冲冲，向着自己的未来出发。

「兔了个兔」创意投稿大赛-小白兔

前言

实现