CSS画一只小兔子，庆祝兔年来到

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

前言

再过几天就是大年三十了，2023年是兔年，今天来使用css实现一只跳舞的可爱小兔子，庆祝兔年的到来，这里也提前祝掘友们兔年大吉，新春快乐！

具体实现

1. 小兔子的实现

小兔子分成几个部分：耳朵、头部（眼镜、嘴巴）、身体、前腿、后腿

a. 耳朵的实现
小兔子有两只耳朵，使用绝对定位，控制左、右耳朵的位置；使用transform属性的rotate()函数实现耳朵倾斜一定角度，右耳还需要使用transform属性的scale()函数实现把左耳垂直翻转；使用伪元素做出耳朵内部的粉颜色；并且兔子的耳朵是尖尖的，使用border-radius属性控制形状

.ear {
  width: 40px;
  height: 128px;
  background: #fff;
  box-shadow: 0 0 2px 0 #fff;
  border-radius: 50% 100% 0 0;
  position: absolute;
  left: 85px;
  top: 20px;
  transform: rotate(-24deg);
}

.right-ear {
  transform: scale(-1, 1) rotate(24deg);
  left: 135px;
  top: 20px;
}

b. 头部的实现
整体头部是一个略圆的形状，也是使用绝对定位控制位置。
小兔子戴了一副墨镜，镜片是椭圆形，镜架使用伪元素实现。
小兔子的嘴巴使用两段弯弯的短线形成，使用边框相关属性实现弯曲的线段，并使用transform属性的scale（）、rotate（）函数实现翻转，形成简单的嘴巴，同时给嘴巴加上一个改变大小的动画。

.head {
  width: 150px;
  height: 150px;
  border-radius: 148px/154px 154px 115px 115px;
  background: linear-gradient(1deg, #e2e2e2 1%, #fff 16%, #fff);
  box-shadow: 0 0 2px 0 #fff;
  position: absolute;
  z-index: 9;
  left: 70px;
  top: 96px;

}

c. 身体、前腿、后腿的实现
小兔子的身体、前腿、后腿也是通过绝对定位控制位置
身体、前腿、后腿都是一个长方形，通过border-radius属性控制形状，把身体做成一个胖乎乎的形态，前腿、后腿做成顶部椭圆的长形，右腿需要根据左腿进行旋转或者翻转。

.body {
  width: 128px;
  height: 140px;
  box-shadow: 0 0 2px 0 #fff;
  background: -webkit-radial-gradient(50% 0%, farthest-side circle, #CDC9C9 2%, #fff 50%, #fff);
  position: absolute;
  left: 85px;
  top: 219px;
  z-index: 8;
  border-radius: 0px 0px 53px 54px/0px 0px 53px 53px;
}

d. 围巾的实现
由于天气太冷了，给小兔子戴一条围巾保暖。

.scarf {
  width: 100%;
  height: 60px;
  border-radius: 50%;
  background-color: #feada6;
  position: absolute;
  left: 0;
  top: -18px;
  z-index: 3;
}

.scarf::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  width: 30px;
  height: 100px;
  border-radius: 50%;
  background-color: #feada6;
}

2. 增加动画，实现一个简单的舞动动作
   主要是头部、身体左右摇摆的动作和前腿左右移动运动的动画

@keyframes swing {

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

      33% {
        transform: rotate(-1deg);
      }

      66% {
        transform: rotate(1deg);
      }

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

    }

    @keyframes leftMove {

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

      33% {
        transform: rotate(100deg) translateY(-10px);
      }

      66% {
        transform: rotate(100deg) translateY(10px);
      }

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

    }

    @keyframes rightMove {

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

      33% {
        transform: rotate(-100deg) translateY(10px);
      }

      66% {
        transform: rotate(-100deg) translateY(-10px);
      }

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

    }

3. 最后给整个页面添加一个好看的背景图

由于代码较多，文章中没有把相关代码全部展示出来，详细的代码可以到码上掘金进行查看。具体效果展示：
code.juejin.cn/pen/7187658…