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

introduce

hi! Hello everyone ~ today to introduce cSS3 animation, the little turtle crawling, step by step two steps on the devil’s pace, the following will give you a detailed introduction to the whole code process.

The code is introduced

Layout is mainly used in CSS, CSS3 write animation, the most used inside is positioning layout, the following code to introduce.

The code block

1. Draw the tortoise

1. The first layout, first draw the tortoise body tail — — — — > > feet, head, body also is the most difficult to draw the tortoise shell, draw a hexagon tortoise shells first, and then draw six lines located in the past, because is to fill color, but also the borders, the layout of the hexagon is a bit tedious, hexagon is composed of a square with two triangle, triangle due to painting It comes out with a fill color, so if you want to draw a border you have to draw two more triangles inside.

1.1 Tortoise shell code details

HTML code:

        <! -- Turtle shell -->
      <div class="center">
        <i></i>
        <i></i>
      </div>
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
      <div class="line4"></div>
      <div class="line5"></div>
      <div class="line6"></div>
Copy the code

SCSS style:

.center{
      position: relative;
      width: 36px;
      height: 42px;
      margin: auto;
      border: 3px solid # 333;
      i:first-child:before{
         content: ' ';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        top: -3px;
        left: -29px;
        border-width: 24px 14px;
        border-style: solid;
        border-color: transparent # 333 transparent transparent;
      }
      i:first-child:after{
       content: ' ';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        top: -2px;
        left: 38px;
        border-width: 24px 14px;
        border-style: solid;
        border-color: transparent transparent transparent # 333;
      }
      i:last-child:before{
         content: ' ';

        display: block;
        position: absolute;
        width: 0;
        height: 0;
        top: -2px;
        left: -27px;
        border-width: 24px 14px;
        border-style: solid;
        border-color: transparent #205C20 transparent transparent;
      }
      i:last-child:after{
       content: ' ';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        top: -2px;
        left: 36px;
        border-width: 24px 14px;
        border-style: solid;
        border-color: transparent transparent transparent #205C20; }}.line1{
      width: 0;
      height: 43px;
      border: 1px solid # 333;
      transform: rotate(30deg);
      position: absolute;
      left: 90px;
      top: 17px;
    }
    .line2{
      @extend .line1;
      height: 30px;
      left: 106px;
      top: 70px;
      transform: rotate(111deg);
    }
    .line3{
      @extend .line1;
          height: 49px;
    left: 82px;
    top: 102px;
    transform: rotate(170deg);
    }
  .line4{
      @extend .line1;
          height: 46px;
    left: 28px;
    top: 99px;
    transform: rotate(34deg);
    }
  .line5{
      @extend .line1;
      height: 29px;
    left: 11px;
    top: 59px;
    transform: rotate(109deg);
    }
  .line6{
      @extend .line1;
      height: 49px;
    left: 31px;
    top: 10px;
    transform: rotate(155deg);
    }
Copy the code

1.2 Tortoise foot + tail code details

HTML code:

      <div class="foot1 foot-ani01">
      </div>
      <div class="foot2 foot-ani01">
      </div>
      <div class="foot3">
      </div>
      <div class="foot4">
      </div>
      <div class="tail tail-ani">
      </div>
Copy the code

Style code:

.foot1{
    position: absolute;
    width: 13px;
    height: 21px;
    background-color: #E8DA73;
    border: 2px solid black;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    left: -9px;
    top: 11px;
    transform: rotate(120deg);
    z-index: -1;
    
  }
  .foot2{
     @extend .foot1;
         left: -12px;
    top: 118px;
    transform: rotate(58deg);
  }
  .foot3{
     @extend .foot1;
   left: 113px;
    top: 124px;
    transform: rotate(-54deg);
  }
   .foot4{
     @extend .foot1;
      left: 109px;
      top: 8px;
      transform: rotate(-125deg);
  }
  .tail{
    @extend .foot1;
    left: 49px;
    top: 160px;
    width: 3px;
    transform: rotate(24deg);
  }
Copy the code

1.3 Details of the turtle head code

HTML code:

      <div class="head head-ani">
        <div class="eye1"></div>
        <div class="eye2"></div>
      </div>
Copy the code

Style:

    .head {
        @extend .foot1;
        left: 45px;
        top: -40px;
        transform: rotate(-181deg);
        width: 27px;
        height: 37px;
        border: 2px solid black;
        border-radius: 0 0 50% 50%/0 0 100% 100%;
        .eye1{
          @extend .line1;
          height: 3px;
          left: 16px;
          top: 22px;
          transform: rotate(-5deg);
        }
        .eye2{
          @extend .line1;
          height: 3px;
          left: 8px;
          top: 22px;
          transform: rotate(-3deg); }}Copy the code

2. Add animation effects

Foot -ani01: animates all 4 feet, remember not to use the original name when animating, probably due to style inheritance, give the turtle feet a new class name: foot-ani01, is the left side of the foot, right side of the unnamed code diagram

The next step is to retract. The turtle likes to retract its head, especially when it senses danger.

Then the tail animation:

An animation that finally crawls forward

Crawling effect picture:

conclusion

Finally, the whole article mainly used positioning layout, as well as the rounded corner style border-radius when drawing turtles, animation and displacement positioning judgment, the above content, thank you for watching! 😛