介绍

今天给大家介绍一下心动的小白兔,想到小白兔你可能会唱起那首歌,昨天画了小乌龟,今天画个小白兔,小白兔对这次的奖品很心动,爱心怦怦跳,发光放电.代码中使用了基本布局,css3动画,代码的流程具体下面介绍.

代码块

心动的小白兔

代码介绍

这篇文章的基本布局跟小乌龟的类似,用的比较多的是定位布局,圆角设置,比较繁琐的地方在于遮罩层的使用,比如兔子耳朵跟头直接有黑色线条的本来,添加了伪类背景颜色白色填充来遮挡连接处的线条,这个也不难,在于要慢慢的花时间来调节.

代码解析

1.先画小白兔耳朵

兔子耳朵制作:先布局,首页画出一边的耳朵出来,另外一边复制代码,调一下方向就好. html代码

<div class="rabit">
    <div class="ear"></div>
    <div class="ear-inner"></div>
    <div class="ear right"></div>
    <div class="ear-inner right"></div>
</div>

样式

.ear{
    width: 70px;
    height: 156px;
    background: #fff;
    border: 2px solid #333;
    border-radius: 115px 42px 84px 85px/116px 172px 262px 266px;
    position: absolute;
    left: 23px;
    top: 22px;
    transform: rotateZ(-43deg);
    z-index: -1;
    overflow: hidden;
    &.right{
      left: 246px;
      transform: rotateZ(37deg);
      
    }
  }
  .ear-inner{
    width: 32px;
    height: 124px;
    background: #FFE3FF;
    border-radius: 43%;
    position: absolute;
    left: 53px;
    top: 50px;
    transform: rotateZ(-43deg);
    z-index: 3;
    &::after{
      content: "";
      width: 34px;
      height: 20px;
      background: #fff;
      position: absolute;
      left: -3px;
      bottom: -5px;
    }
    &.right{
      left: 261px;
      top: 43px;
      transform: rotateZ(36deg);
      z-index: 3;
      &::after{
        width: 41px;
        left: 0;
      }
    }
  }

2. 小兔子头部+眼睛+嘴+粉扑扑脸颊

html

    <div class="head">
      <div class="eye"></div>
      <div class="eye right"></div>
      <div class="mouth"></div>
      <div class="mouth right"></div>
      <div class="shy"></div>
      <div class="shy right"></div>
    </div>

样式

.head{
    width: 240px;
    height: 200px;
    background: #fff;
    border-radius: 150px;
    border: 2px solid #333;
    position: absolute;
    top: 140px;
    left: 50px;
    overflow: hidden;
    .eye{
      width: 34px;
      height: 5px;
      border-radius: 10px;
      background: #333;
      position: absolute;
      left: 44px;
      top: 53px;
      transform: rotate(-15deg);
      
      &.right{
        left: 132px;
        top: 48px;
        transform: rotate(15deg);
      }
    }
    .eye-wink{
      top: 44px;
      transform: rotate(15deg);
    }
    .mouth{
      width: 16px;
      height: 10px;
      border: 4px solid #333;
      border-right: 4px solid #333;
      border-bottom: 4px solid #333;
      border-left: 4px solid transparent;
      border-top: 4px solid transparent;
      border-radius: 50%;
      transform:scale(-1.2,1)  rotate(43deg);
      position: absolute;
      left: 80px;
      top: 78px;
      &.right{
        left: 100px;
        transform:scale(1.2,1) rotate(43deg);
      }
    }
    .shy{
      width: 50px;
      height: 52px;
      background: #FEE0FE;
      border: 2px solid #333;
      border-radius: 40px;
      position: absolute;
      top: 98px;
      left: -12px;
      z-index: 3;
      transform: skew(5deg);
      &.right{
        left: 146px;
      }
    }
  }

3.小兔子身体+手+爱心

html

    <div class="rabit-bd">
      <div class="body-bg1"></div>
      <!-- 爱心 -->
      <div class="love">
        <i class="line1"></i>
        <i class="line2"></i>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <div class="arm"></div>
      <div class="arm arm-right"></div>
    </div>

样式

// body
.rabit-bd{
  position: absolute;
  left: 100px;
  top: 300px;
}
.body-bg1{
  width: 214px;
  height: 234px;
  border-radius: 80%;
  background: #fff;
  border: 2px solid #333;
  position: absolute;
  left: -2px;
  top: -17px;
  z-index: 0;
  transform: rotate(-52deg);
  &::after{
    content: "";
    width: 150px;
    height: 50px;
    background: #fff;
    position: absolute;
    top: 21px;
    left: 90px;
    transform: rotate(224deg);
  }
}
// 小手
.arm{
  width: 32px;
  height: 80px;
  background: #fff;
  border: 2px solid #333;
  border-radius: 70%;
  position: absolute;
  top: 10px;
  left: 20px;
  transform: rotate(30deg);
  &::after{
    content: "";
    width: 54px;
    height: 57px;
    background: #fff;
    position: absolute;
    top: 31px;
    left: -5px;
  }
}
.arm-right{
  top: 1px;
  left: 100px;
  transform: rotate(-41deg);
}

// 爱心
.love{
    position: absolute;
    top: 0;
    left: 174px;
    animation: swell 1s ease infinite;
    .left{
      width: 20px;
      height: 38px;
      background: #FE8A86;
      border-radius: 30px 30px 0 0;
      transform: translateX(-95px) rotate(45deg);
      position: absolute;
      left: -7px;
    }
    .right{
      @extend .left;
      transform: rotate(-45deg);
      position: absolute;
      left: -116px;
    }
    .line1{
      width: 2px;
      height: 4px;
      background: #fff;
      border-radius: 50%;
      position: absolute;
      top: 11px;
      left: -113px;
      z-index: 1;
      transform: rotate(-28deg);
      box-shadow: 0 0 20px 3px #fff;
    }
    .line2{
      @extend .line1;
      height: 10px;
      top: 21px;
      left: -103px;
    
    }
}

4.小兔子腿+尾巴

html

    <div class="leg leg-ani01"></div>
    <div class="leg leg-right"></div>
    <div class="tail"></div>

样式

// 腿
.leg{
  width: 50px;
  height: 60px;
  background: #fff;
  border: 2px solid #333;
  border-radius: 70%;
  position: absolute;
  top: 448px;
  left: 107px;
  z-index: -1;
}
.leg-right{
  width: 57px;
  height: 190px;
  border-radius: 53px 53px 50px 60px/80px 80px 120px 120px;
  left: 267px;
  top: 303px;
  z-index: 5;
  transform: rotate(-198deg);
  &::after{
    content: "";
    width: 50px;
    height: 183px;
    background: #fff;
    position: absolute;
    left: 19px;
    top: 18px;
    border-radius: 50%;
    transform: rotate(-177deg);
  }
}

//尾巴
.tail{
  width: 50px;
  height: 80px;
  border: 2px solid #333;
  background: #fff;
  position: absolute;
  left: 306px;
  top: 377px;
  border-radius: 70%;
  transform: rotate(-75deg);
}

5.小星星+头上小草

html

    <!-- 小草 -->
    <div class="grass">
      <div class="leaf-line leaf-line-ani"></div>
      <div class="leaf1 leaf1-ani01"></div>
      <div class="leaf2 leaf1-ani02"></div>
    </div>
    <!-- 闪星星 -->
    <div class="star1">✦</div>
    <div class="star2">✦</div>
    <div class="star3">✦</div>

样式

//头上小草
.grass{
  .leaf-line{
    width: 40px;
    height: 40px;
    background: #333;
    transform: rotate(-30deg);
    position: absolute;
    top: 104px;
    left: 160px;
    border-radius: 80% 0;
    &::after{
      content: "";
      width: 50px;
      height: 50px;
      background-color: #43C1B9;
      border-radius: 57% 0;
      transform: rotate(3deg);
      position: absolute;
      left: 2px;
      top: 2px;
      
    }
  }
  .leaf1{
    width: 14px;
    height: 34px;
    background: #85CC79;
    border: 2px solid #333;
    transform: rotate(76deg);
    position: absolute;
    top: 80px;
    left: 180px;
    border-radius: 80% 103px;
  }
  .leaf2{
    @extend .leaf1;
    top: 78px;
    left: 156px;
    transform: rotate(12deg);
    width: 16px;
    height: 29px;
  }
}
// 星星
.star1{
  font-size: 52px;
  color: #FCFFB5;
  position: absolute;
  top: 32px;
  left: 96px;
  transform: rotate(9deg) skew(27deg,-13deg);
  animation: flash 0.3s ease infinite alternate;
}
.star2{
  @extend .star1;
  font-size: 56px;
  top: 297px;
  left: 43px;
  transform: rotate(36deg) skew(-1deg, -13deg);
}
.star3{
 @extend .star1;
  font-size: 42px;
  top: 260px;
  left: 294px;
  transform: rotate(35deg) skew(26deg, -19deg);
}