介绍

今天给大家介绍一下css3动画,小乌龟爬行,一步两步就魔鬼的步伐,下面将给大家详细介绍一下整个代码的流程.

代码介绍

布局主要用到css,css3写动画,里面用的最多的就是定位布局,下面来介绍一下代码.

代码块

小乌龟爬行链接

1.画乌龟

1.先布局,先画乌龟身体-->脚-->尾巴--头,身体也就是乌龟壳最难画的,乌龟壳先画一个六边形出来,然后再画六条线定位过去,因为是要填充颜色的,而且还有边框,六边形的布局也是有点繁琐的,六边形是由一个正方形跟两个三角形组成的,三角形由于画出来是填充颜色,所以想要画边框就要画多两个三角形内嵌进去.

1.1乌龟壳代码详解

html代码:

        <!-- 乌龟壳 -->
      <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>

scss样式:

.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);
    }

1.2乌龟脚+尾巴代码详解

html代码:

      <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>

样式代码:

.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);
  }

1.3乌龟头部代码详解

html代码:

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

样式:

    .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);
        }
    }