纯css版弹吉他的小兔子祝大家新年快乐，身体健康，诸事顺遂，钱兔无量~“我正在参加「兔了个兔」创意投稿大赛，详情请看：「

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

人生第一篇掘金文，献丑了。希望各位大佬多提提宝贵的意见和建议。纯css版弹吉他的小兔子祝大家新年快乐，身体健康，诸事顺遂，钱兔无量~

前言

作为公司独苗，每天忙的双脚不沾地。临近春节丝毫没有让我喘息的意思，面对堆积如山的工作我只想说毁灭吧，爱咋咋地~

你病，或者不病倒，老板就在那里，不悲不喜；

你休，或者不休假，工作就在那里，不来不去；

你拼，或者不拼命，工资就在那里，不增不减；

你辞，或者不辞职，地球还是会转，不歇不停；

好吧，人不疯狂枉少年，偶尔摸摸鱼画个兔子也不会影响大局的吧……的吧。

制作思路

1. 定位文章的方向，拿捏兔子的人设

用纯CSS画一只可爱的有动画效果的拜年的小兔子。

问：为什么定位是纯CSS呢？
答：作为一个切图仔，别的也拿不出手啊，不要难为自己。嗯！
问：画一个什么样子的小兔子呢？
答：网上找一个顺眼的吧，毕竟咱也没有什么想象力和创造力。
问：需要一个什么样子的动画效果呢？
答：活泼生动的，可以凸显主题的，让人看了欢喜的，更重要的是我可以画的出来的。

2. 找一个模特

于是乎，我找了几款卡通小兔子的形象。经过层层筛选，一只可爱的小兔子过五关斩六将，拔得了头筹！喏，就是下面这个小可爱~

3.买家秀的心里路程

模特找到了，下面开始整活~
开始的开始，买家秀长这样：弯弯的眼，细细的嘴还有吐露在外面的舌头，怎么说呢可爱是可爱，但是盯得久了又不免发现一丝呆傻，这可能就是所谓的呆萌吧~

不允许我的小兔子是一副不太聪明的样子，她应该是活泼的生动的！正所谓人靠衣装马靠鞍，是时候给她置办行头了。

于是小兔子便拥有了一把小吉他，双手举空气的造型也换成了弹吉他的样子，这是一只酷酷的摇滚兔！光弹吉他不唱歌的小兔子怎么能算得上摇滚呢！吐舌头的造型也是三岁以下小兔子的行为，作为走在时代前沿的艺术兔舌头缩回去，嘴巴要动起来的哟~

来，康忙北鼻举起你的双手，跟我一起躁起来~

具体实现

好吧，闲扯了这么多我来介绍一下这只小兔子的诞生始末吧（关公面前耍大刀，各位看官请见谅）

主体部分

我们先来看下页面的Dom结构。

    <div class="rabbit">
            <div class="rabbit-wrapper">
                <div class="rabbit-top">
                    <!-- ears -->
                    <div class="ears">
                        <div class="ears-left">
                        </div>
                        <div class="ears-right">
                        </div>
                    </div>
                    <!-- face -->
                    <div class="face">
                        <div class="eyes">
                            <div class="eyes-left"></div>
                            <div class="eyes-right"></div>
                        </div>
                        <div class="nose">
                            <div class="nose-shadow"></div>
                        </div>
                        <div class="mouth"></div>
                        <div class="rouge rouge-left"></div>
                        <div class="rouge rouge-right"></div>
                        <!-- <div class="tongue"></div> -->
                    </div>
                </div>
                <div class="body"></div>
                <div class="arms">
                    <div class="arm arm-right"></div>
                    <div class="arm arm-left"></div>
                </div>
                <div class="hands">
                    <div class="hand hand-right"></div>
                    <div class="hand hand-left"></div>
                </div>
                <div class="legs">
                    <div class="leg leg-right"></div>
                    <div class="leg leg-left leg-right"></div>
                </div>
                <div class="feet">
                    <div class="feet-right"></div>
                    <div class="feet-left"></div>
                </div>
                <div class="guitar">
                <div class="deck"></div>
                <div class="neck"></div>
            </div>
        </div>
    </div>
    <div class="slogn-right">
        <p>新年好呀~</p>
        <p>新年好呀~</p>
        <p>祝贺大家新年好~</p>
    </div>
</div>

页面标签比较多，但是仔细拆分你会发现内容主要分为两个部分：左边的兔子元素，右边的拜年吉祥话，吉祥话简单明了暂且不表。那我们就来说几个这只小兔子的主要元素。

1. 一眼望去粉粉的背景

给背景图设置一个background:#f0a6a1;即可。

2、椭圆形的脸

定义一个长方形，圆角设置为50%即可。

  width: 246px;
  height: 196px;
  border-radius: 50%;
  background-color: #fff;
  margin-top: 160px;
  position: relative;
  z-index: 10;
}

小知识：如果需要一个正圆的话，先设置一个正方形，然后加上关键元素border-radius。那么border-radius的值如何设置呢？这里有两种方式：

如若以固定值设置圆角大小时,border-radius的最大值为元素宽度和高度里面最小值的一半。

3、弯弯笑眼

和椭圆的脸一样，定一个长方形，加上圆角。不同的是眼睛的border-bottom为0。

.eyes-right {
  width: 36px;
  height: 26px;
  border: 5px solid #381403;
  border-bottom: 0;
  border-radius: 36px 36px 0 0;
  background: #fff;
}

4、不规则的耳朵 和上面两个元素一样，同样需要定义长方形，定义圆角。不同的是border-radius用了完整写法且借助了transform变形。

.rabbit .ears div {
  background-color: #fff;
  border-radius: 80px 80px 65px 65px/53px 53px 254px 254px;
  position: absolute;
}
.ears-left-inner,
.ears-left {
  width: 85px;
  height: 160px;
  left: 50px;
  top: 24px;
  transform: skew(-5deg, -19deg);
  transform-origin: right bottom;
  animation: rotateThing 2s ease-in-out infinite alternate;
}

.ears-right-inner,
.ears-right {
  width: 75px;
  height: 120px;
  left: 137px;
  top: 55px;
  transform: rotate(45deg)skew(-5deg, -19deg);
  transform-origin: left bottom;
  animation: rotateThing 2s ease-in-out infinite alternate;
}

.ears-left::after,
.ears-right::after {
  content: "";
  transform: scale(.5, .7)skew(-5deg, -19deg);
  background-color: #fbb9b6;
  left: 0;
  position: absolute;
  top: 24px;
  width: 85px;
  height: 160px;
  border-radius: 80px 80px 65px 65px/53px 53px 254px 254px;
}

.ears-right::after {
  top: 23px;
}

通常我们用的border-radius的语法长这样border-radius:top right bottom left;但是呢，这不是它只是简写并不是完整写法。其实完整的写法应该是：border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px; “/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径，什么是水平半径和垂直半径呢，见下图：

5、弯曲的四肢

以右腿为例。

长方形元素再次出现，不同的是长方形的边颜色定义为透明色且边框宽度为20px，border-top的颜色设置为30px的白色，再借助border-radius经过transform旋转，这只强壮的兔腿就画好啦~腿画出来了，当然不能忘记它的小脚。使用伪类，画个椭圆，旋转定位完成！

.leg-right {
  width: 68px;
  height: 72px;
  border: 20px solid transparent;
  border-top: 30px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 398px;
  left: 67px;
  transform: rotate(47deg);
  z-index: 6;
}

.leg-right::before {
  content: "";
  width: 36px;
  height: 72px;
  border: 20px solid transparent;
  border-top: 28px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: -36px;
  left: 0;
  transform: rotate(-3deg)
}

艺术兔动起来

兔子模特已经造型已经完成，现在我们就开始让她动起来~所以接下来我带大家如何通过css写动画。说到动画我们会想到css3的animation属性，它的语法如下：

animation: name duration timing-function delay iteration-count direction;

animation-name：动画名称

animation-duration：动画持续时间

animation-timing-function：规定动画的速度曲线

animation-delay：规定在动画开始之前的延迟

animation-iteration-count：规定动画应该播放的次数

animation-direction：规定是否应该轮流反向播放动画

下面举一个简单的例子：

摇晃的脑袋

.rabbit-top {
  transition: all 2s;
  transform-origin: center bottom;
  animation: shakeHead 2s ease-in-out .5s infinite;
}

@keyframes shakeHead {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

从上面可以看出这个动画非常简单，整个动画分成了从0%-100%分成了5段。0%保持不变，25%时逆时针旋转10度，50%时回正，75%时旋转到顺时针10度的位置，100%时回正。再将播放次数设置为infinite就可以实现不停摇晃的效果。

小知识：默认情况下，元素执行动画的时候是以元素自己的中心作为中心点进行旋转变形的，如果不设置中心点的话，动画有时候看上去就有些怪异，所以我们需要使用transform-origin为此设置中心点。

下面是transform-origin的语法

transform-origin: x-axis y-axis z-axis;

transform-origin的默认值：transform-origin:50% 50% 0; transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。

总结

第一次码字经验不足加上技术确实水平有限，文章和代码也是修修补补中完成。在不断的完善中发现遗忘的知识点和不足之处，希望自己能再接再厉吧！

在线代码

新人不易，希望大佬们不吝赐教（拱手）！在此祝大家新年快乐，身体健康，诸事顺遂，钱兔无量~