I am participating in the Code nuggets experience, details: Show your creative code blocks

introduce

hi! Hello everyone ~ today to introduce you to the heart of the small white rabbit, think of the small white rabbit you may sing that song, yesterday drew a small turtle, today draw a small white rabbit, the small white rabbit is very moved to the prize, heart pounding, light discharge. The basic layout is used in the code, CSS3 animation, the process of the code is introduced below.

The code block

The code is introduced

The basic layout of the article with the turtle, with more location layout, rounded, more complicated place lies in the use of mask, such as the rabbit ears fall directly with black lines, add the pseudo class background color to white to block joint with filling lines, this also is not difficult, is to slowly take the time to adjust.

Code parsing

1. Draw white rabbit ears first

Rabbit ear production: the first layout, the home page draw one side of the ear out, the other side of the copy code, adjust the direction

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

style

.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; }}}Copy the code

2. Bunny head + eyes + mouth + cheeks

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>
Copy the code

style

.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; }}}Copy the code

3. Little rabbit body + hands + heart

html

    <div class="rabit-bd">
      <div class="body-bg1"></div>
      <! Love -- -- -- >
      <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>
Copy the code

style

// 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); }}/ / hands
.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
.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; }}Copy the code

4. Bunny legs + tail

html

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

style

/ / legs
.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
.tail{
  width: 50px;
  height: 80px;
  border: 2px solid # 333;
  background: #fff;
  position: absolute;
  left: 306px;
  top: 377px;
  border-radius: 70%;
  transform: rotate(-75deg);
}
Copy the code

5. Little star + grass on head

html

    <! - the grass - >
    <div class="grass">
      <div class="leaf-line leaf-line-ani"></div>
      <div class="leaf1 leaf1-ani01"></div>
      <div class="leaf2 leaf1-ani02"></div>
    </div>
    <! -- Twinkle star -->
    <div class="star1">✦</div>
    <div class="star2">✦</div>
    <div class="star3">✦</div>
Copy the code

style

// The grass on the head
.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; }}/ / the stars
.star1{
  font-size: 52px;
  color: #FCFFB5;
  position: absolute;
  top: 32px;
  left: 96px;
  transform: rotate(9deg) skew(27deg, -13deg);
  animation: flash 0.3 s 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);
}
Copy the code

That’s all the layout of the rabbit. Now let’s talk about special effects animation.

Animation is introduced

1. Sparkling stars

Animation is mainly used for the flash of the little star, which adds alternate property and opacity change for the flash.

2. Love magnified animation

3. Mouth animation

4. Grass animation

conclusion

Above so much content, with the most is positioning with mask layer use, finally thank you for watching ~😛