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

前言

最近看嘿佬也在写兔了个兔，而且这篇CSS 画作 - 兔 - 兔年专题 - 掘金 (juejin.cn)很适合我们初学者去学习，当然由于才看这些知识，对动画和一些属性都不明白，所以我魔改了嘿佬画的兔子，将其动画去除，再添加一些内容进去，这样，也慢慢知道了一些属性的作用。

正篇

实现过程

首先，我们要写HTML，里面我们在嘿佬的基础上，加了几个div,让兔子不这么拟人化，而是更像一只动物兔子，于是，我去除了嘴巴，变成尾巴，然后再加了一个身体，如下：

<div id="wrap">
    <div class="ear left"></div>
    <div class="ear right"></div>
    <div class="face">
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="nose"></div>
        <div class="tail"></div>
        
    </div>
    <div class="body"></div>
    <div class="foot left"></div>
    <div class="foot right"></div>
</div>

接着我们看看CSS，原先我对里面一窍不通，现在看的勉勉强强，首先我们需要进行定位，然后才开始CSS绘制，通过高和宽属性，我们可以定制出一个长方形，然后加上border-radius属性控制，我们就能得到相应的圆润一些的图像，比如圆角长方形，和圆形以及椭圆，这样我们就可以大致绘制出我们想要的兔子身体的部分轮廓，再进行反转和颜色控制，叠加等数值改变调整，最终获得我们想绘制的图形：

#wrap {
    width: 300px;
    height: 400px;
    border: 1px solid rgb(255, 255, 255);
    margin: 0 auto;
    position: relative;
    background-color: #1168a6;
}

.ear,
.face,
.eye,
.nose,
.tail {
    position: absolute;
}
.ear {
    background-color: white;
    height: 100px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 100px;
    transform: rotate(-10deg);
    transform-origin: bottom;
}

.ear.right {
    left: unset;
    right: 100px;
    transform: rotate(10deg);
}

.ear::after {
    content: '';
    background-color: #ffccd5;
    width: 80%;
    height: 80%;
    border-radius: inherit;
}

.ear {
    background-color: white;
    height: 130px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 100px;
    transform: rotate(-10deg);
    transform-origin: bottom;
}

.ear.right {
    left: unset;
    right: 100px;
    transform: rotate(10deg);
}

.ear::after {
    content: '';
    background-color: #ffccd5;
    width: 80%;
    height: 80%;
    border-radius: inherit;
}

.face {
    border-radius: 50%;
    width: 150px;
    height: 120px;
    top: 100px;
    background: #fff;
    left: 75px;
}

.eye {
    background-color: black;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    left: 25px;
    top: 40px;
}

.body :hover {
  color: red;
}

.eye.right {
    left: unset;
    right: 55px;
}

.eye::after {
    content: '';
    width: 5px;
    height: 5px;
    position: absolute;
    bottom: 9px;
    right: 9px;
    border-radius: 50%;
    background-color: white;
}

.nose {
    width: 15px;
    height: 15px;
    left: 38px;
    background-color: rgb(93, 51, 51);
    border-radius: 50%;
    top: 70px;
    z-index: 100;
}

.tail {
    background-color: white;
    width: 40px;
    height: 20px;
    border-radius: 80%;
    display: block;
    position: relative;
    top: 120px;
    left: 150px;
}



.body {
  background-color: white;
  width: 180px;
  height: 120px;
  top:180px;
  left: 80px;
  border-radius: 70%;
  position: relative;

}

其实，一开始也想将嘿佬的动画给加上，但是我这个码上掘金运行并没看到效果，索性把动画控制的CSS代码去除了，然后实际上我实现的就一个身体和尾巴，然后对眼睛进行调整，再把鼻子当成嘴巴处理了：

总结

前端真的挺有趣，可以实现各种各样的效果，跟着大佬后面慢慢学习，相信自己可以最终学会前端的一些基础技术，拓展自己的知识面。

画个兔兔——初学CSS，HTML记录

前言

正篇

实现过程

总结