CSS画的小老虎 - 虎虎生威 - 卷轴打开动效

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

大家好，我是 摸鱼小公举，一个不想摸鱼的公举,期待着有一天能够咸鱼翻身。这篇文章主要内容是一个关于2022年虎年创意动效；画的老虎有些丑大家不要喷我哦！

开篇 （实现逻辑）

这里我们先来说我实现这动效的大概过程和准备工作：

（1）在网上找了一张好看的背景gif图做背景，找到了自己心仪的卡通动漫老虎图片。

（2）然后就按照老虎图片用CSS画出了卡通动漫老虎，这里花了我两天时间画的。

（3）画好了老虎就开始做老虎的animation的动效

（4）后面觉得只有老虎动效太单调了，就在网上找了一个卷轴打开的动效，把老虎放在卷轴上动。

画卡通动漫老虎

首先我来给大家看一下原图

再来对比一下我画的，我不是胖，我是可爱到膨胀。

在这里我就不解释其中画老虎运用到的知识点了请参考

# CSS+JS实现土味中秋特效 # 用CSS制作中秋之夜星星闪烁动效

画老虎的头

这里头就包括了（耳朵，眼睛，鼻子，牙齿，腮帮子等），这其中有一些是辅助元素是用来遮挡黑边的

HTML代码
         <div class="tager1">
            <div class="head">
              <div class="text">王</div>
              <div class="yuan y-left">
                <div class="inside"></div>
              </div>
              <div class="yuan y-right">
                <div class="inside"></div>
              </div>
              <!-- 耳朵 -->
              <div class="ears e-left"></div>
              <div class="ears e-right"></div>
    
              <!-- 眼睛 -->
              <div class="eyes eye-left">
                <div class="small"></div>
              </div>
              <div class="eyes eye-right">
                <div class="small"></div>
              </div>
              <!-- 鼻子 -->
              <div class="nose">
                <div class="line"></div>
              </div>
              <div class="noseLeft"></div>
              <div class="noseRight"></div>
              <!-- 牙齿 -->
              <div class="tooth"></div>
              <div class="tooth t-right"></div>
              <!-- 腮帮子 -->
              <div class="f-left">
                <span></span>
                <span></span>
              </div>
              <div class="f-left f-right">
                <span></span>
                <span></span>
              </div>
            </div>
           </div>
           
 CSS代码  
 
（ 这里我常用的知识点 补充z-index 层级属性最为重要，一般都是使用了定位之后才会起效果）

      .head {
        width: 100px;
        height: 90px;
        border-radius: 78% 78% 59% 56%;
        background-color: rgb(248, 229, 118);
        border: 1px solid #333;
        position: relative;
      }
      .text {
        font-size: 20px;
        color: #000;
        position: absolute;
        text-align: center;
        left: 0;
        right: 0;
        top: 6px;
        z-index: 11;
        animation: head 0.8s ease-in-out infinite;
      }
      .ears {
        width: 30px;
        height: 26px;
        border-radius: 50%;
        background-color: rgb(248, 229, 118);
        border: 1px solid #333;
        position: absolute;
        z-index: -1;
      }
      .e-right {
        transform: rotateZ(45deg);
        right: -6px;
        top: 0px;
      }
      .e-left {
        transform: rotateZ(-45deg);
        left: -6px;
        top: 0px;
      }
      .yuan {
        width: 30px;
        height: 26px;
        border-radius: 50%;
        background-color: rgb(248, 229, 118);
        position: absolute;
      }
      .y-left {
        transform: rotateZ(-45deg);
        margin-top: 6px;
        left: 0;
      }
      .y-right {
        transform: rotateZ(45deg);
        margin-top: 6px;
        right: 0;
      }
      .inside {
        width: 16px;
        height: 10px;
        background-color: rgb(250, 163, 163);
        border: 1px solid #333;
        border-radius: 50% 50% 10% 10%;
        margin-left: 6px;
      }
      .eyes {
        width: 14px;
        height: 14px;
        background-color: #000;
        border-radius: 50%;
        position: absolute;
        top: 40px;
        z-index: 20;
        animation: head 0.8s ease-in-out infinite;
      }
      .eye-left {
        left: 24px;
      }
      .eye-right {
        transform: rotateY(180deg);
        right: 24px;
      }
      .small {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #fff;
        margin-left: 3px;
        margin-top: 3px;
      }
      .nose {
        width: 8px;
        height: 8px;
        border-radius: 100% 50% 50%;
        background-color: rgb(250, 163, 163);
        border: 1px solid #333;
        position: relative;
        top: 46px;
        margin: 0 auto;
        left: 0;
        right: 0;
        transform: rotateZ(45deg);
        z-index: 11;
      }
      .line {
        position: absolute;
        width: 2px;
        height: 8px;
        background-color: #000;
        transform: rotateZ(-45deg);
        margin-left: 9px;
        margin-top: 7px;
      }
      .noseLeft,
      .noseRight {
        width: 17px;
        height: 34px;
        background-color: rgb(248, 229, 118);
        position: absolute;
        top: 31px;
        right: 34px;
        border-radius: 50%;
        border: 2px solid rgb(248, 229, 118);
        border-bottom-color: #000;
        z-index: 9;
      }
      .noseLeft {
        left: 32px;
      }
      .tooth {
        width: 4px;
        height: 10px;
        background: #fff;
        border-radius: 100%;
        position: absolute;
        top: 61px;
        left: 40px;
        border: 1px solid #333;
        z-index: 2;
      }
      .t-right {
        left: 52px;
      }
      .f-left span {
        width: 18px;
        height: 8px;
        border-radius: 0 50% 50% 0;
        background-color: #000;
        position: absolute;
        bottom: 28px;
        left: -1px;
        transform: rotateZ(-23deg);
      }
      .f-left span:nth-child(2) {
        width: 14px;
        bottom: 18px;
        left: 2px;
      }
      .f-right {
        transform: rotateY(180deg) translateY(80px);
      }
 
 这里我的代码是没来得及优化的,然后看起来有点多

画老虎的下半部分

其实这里你们也可以用伪元素来写，这样会比较节约html结构。然后这里最难画的地方就是尾巴，仔细看一下你们会发现尾巴部分那里我没处理好，有更好主意欢迎大家提意见。

HTML代码

         <!-- 肚子 -->
            <div class="belly"></div>
            <!-- 脚 -->
            <div class="foot"></div>
            <div class="foot foot1"></div>
            <!-- 手 -->
            <div class="hands">
              <div class="yuan yuan1"></div>
              <div class="yuan"></div>
            </div>
            <div class="hands">
              <div class="yuan yuan1"></div>
              <div class="yuan"></div>
            </div>
            <!-- 尾巴 -->
            <div class="total">
              <div class="tail">
                <span class="black1"></span>
                <div class="tail-insaide"></div>
              </div>
              <div class="tail tail1">
                <span></span>
                <span class="black"></span>
                <span class="black"></span>
                <div class="tail-insaide"></div>
              </div>
            </div>
            
CSS代码
 .belly {
        width: 50px;
        height: 50px;
        border-radius: 43% 43% 43% 42%;
        border: 1px solid #333;
        background-color: rgb(248, 229, 118);
        position: relative;
        left: 23px;
        top: -9px;
        z-index: -1;
      }
      .foot {
        display: inline-block;
        width: 10px;
        height: 20px;
        border: 1px solid #333;
        background-color: rgb(248, 229, 118);
        border-radius: 50%;
        transform: rotateZ(20deg);
        position: relative;
        left: 28px;
        top: -26px;
        z-index: -2;
      }
      .foot1 {
        left: 40px;
        transform: rotateZ(-20deg);
      }
      .hands {
        display: inline-block;
        width: 30px;
        height: 10px;
        border: 1px solid #333;
        background-color: rgb(248, 229, 118);
        border-radius: 41% 155% 50% 0;
        transform: rotateX(-180deg);
        position: relative;
        top: -67px;
        left: 2px;
        transform: rotateZ(230deg);
        animation: arm 1s ease-in-out infinite;
      }
      .hands .yuan {
        width: 10px;
        height: 10px;
        background-color: rgb(248, 229, 118);
        border-radius: 50%;
        position: absolute;
        left: -6px;
      }
      .hands .yuan1 {
        width: 8px;
        height: 8px;
        bottom: 0;
        background-color: #000;
        left: 10px;
      }
      .tail {
        width: 50px;
        height: 25px;
        border-radius: 24px 21px 6px 1px;
        background-color: rgb(248, 229, 118);
        border: 1px solid #333;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transform: rotateX(180deg);
      }
      .tail span {
        width: 10px;
        height: 10px;
        background-color: rgb(248, 229, 118);
        border-radius: 50%;
        position: absolute;
        z-index: 9;
        left: 0px;
        top: 16px;
        z-index: 99;
      }
      .tail .black {
        width: 8px;
        height: 6px;
        background-color: #000;
        left: -1px;
        top: 20px;
      }
      .tail .black1 {
        background-color: #000;
        width: 8px;
        height: 6px;
        left: 19px;
        top: 4px;
        transform: rotateZ(100deg);
      }
      .tail .black:nth-child(2) {
        width: 12px;
        margin-top: 4px;
      }
      .tail .black:nth-child(3) {
        left: 18px !important;
        top: 1px;
        transform: rotateZ(90deg);
      }
      .tail-insaide {
        width: 30px;
        height: 15px;
        border-radius: 15px 15px 0px 0px;
        background-color: #c5bd98;
        border-top: 1px solid #333;
        margin-top: 10px;
      }
      .tail1 {
        transform: rotateX(360deg);
        margin-left: 40px;
        margin-top: -50px;
      }
      .total {
        margin-top: -67px;
        margin-left: 44px;
        position: relative;
        z-index: -2;
        animation: tail 0.8s ease-in-out infinite;
      }

这样生动可爱的小老虎就画出来了

小老虎的动效

其实就是简单的放大缩小，上下左右晃动的效果；本来想试试做个老虎走路的动效，太难了，我实现不出来。

CSS代码：然后动画剧本应用的CSS在上面两段内容

  /* 尾巴摇摆动画*/
      @keyframes tail {
        0% {
          transform-origin: 20px;
          transform: rotateZ(0deg);
        }

        60% {
          transform-origin: 20px;
          transform: rotateZ(10deg);
        }

        100% {
          transform-origin: 20px;
          transform: rotateZ(0deg);
        }
      }
      /* 手臂摇摆动画*/
      @keyframes arm {
        0% {
          transform-origin: 0 100%;
          transform: rotateZ(220deg);
        }

        60% {
          transform-origin: 0 100%;
          transform: rotateZ(350deg);
        }

        100% {
          transform-origin: 0 100%;
          transform: rotateZ(220deg);
        }
      }
      /* 放大摇摆动画*/
      @keyframes head {
        0% {
          transform: scale(1);
        }

        60% {
          transform: scale(1.2);
        }

        100% {
          transform: scale(1);
        }
      }

这动效看起来是牵强

另一只母老虎的产生

HTML代码省略,是复制过来的

CSS代码
.tager2 {
        z-index: 99;
        transform: rotateY(180deg);
        margin-left: 60px;
      }
      .tager2 .head,
      .tager2 .ears,
      .tager2 .yuan,
      .tager2 .yuan1,
      .tager2 .noseLeft,
      .tager2 .noseRight,
      .tager2 .belly,
      .tager2 .tail,
      .tager2 .hands,
      .tager2 .foot,
      .tager2 .tail span,
      .tager2 .hands .yuan {
        background-color: pink;
      }
      .tager2 .hands .yuan1,
      .tager2 .tail .black,
      .tager2 .tail .black1 {
        background-color: #000;
      }
      .tager2 .noseLeft,
      .tager2 .noseRight {
        border: 1px solid pink;
        border-bottom: 2px solid #333;
      }

效果 (此时此刻我想起了一首歌,两只老虎两只老虎跑得快,跑得快,一只没有耳朵,一只没有尾巴,真奇怪...)

实现卷轴打开动效

本来刚开始只有老虎在动，后面觉得太单调，突发奇想就想到了卷轴打开动效;

HTML代码

 <div class="container">
      <!-- 画横幅 -->
      <div class="content">
        <div class="l-pic-index"></div>
        <!--左转轴-->
        <div class="r-pic-index"></div>
        <!--右转轴-->
        <div class="l-bg-index"></div>
        <div class="r-bg-index"></div>
        <div class="main-index">
          <!-- <h1 class="title"><img src="images/bg.jpeg" alt="" /></h1> -->
            <!--这里是放卷轴上展示的内容
          <div class="text1">生</div>
          <div class="text1 text2">威</div>
        </div>
      </div>
    </div>
    
 CSS代码
 
   /* 卷轴打开 */
      .content {
        position: relative;
        margin: 40px 0 0 -21px;
        width: 900px;
        height: 460px;
      }
      .l-pic-index {
        position: absolute;
        left: 400px;
        top: 20px;
        z-index: 2;
        width: 50px;
        height: 460px;
        background: url("images/j1.png") no-repeat right 0;
      }
      .r-pic-index {
        position: absolute;
        right: 400px;
        top: 20px;
        z-index: 2;
        width: 50px;
        height: 460px;
        background: url("images/j4.png") no-repeat left 0;
      }
      .l-bg-index {
        position: absolute;
        top: 21px; /*中间转轴位置*/
        left: 430px;
        z-index: 1;
        width: 25px;
        height: 459px;
        background: url("images/j2.png") right 0 no-repeat;
      }
      .r-bg-index {
        position: absolute;
        top: 20px;
        right: 430px;
        z-index: 1;
        width: 25px;
        height: 459px;
        background: url("images/j3.png") 0 0 no-repeat;
      }
      .main-index {
        display: none;
        /* overflow: hidden; */
        zoom: 1;
        position: absolute;
        z-index: 5;
        width: 700px;
        height: 280px;
        left: 180px;
        top: 130px;
        color: #2e2e2e;
      }
      .main-index img {
        width: 100%;
      }
      .intro-text {
        margin: 10px 0 0 44px;
        line-height: 2;
        text-indent: 3px;
      }
      .text1 {
        display: inline-block;
        font-size: 100px;
        color: #fff;
        font-weight: bold;
        margin-left: 40px;
      }
      
//JS代码

卷轴展开效果：是用了jquery的animate 左滑右滑,淡入淡出的效果。在这里补充一下相关知识

语法：(selector).animate( {styles},speed,easing,callback)

定义和用法：animate() 方法执行 CSS 属性集的自定义动画。
该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
提示：请使用 "+=" 或 "-=" 来创建相对动画，想更深入了解可以前往菜鸟教程或者W3school。
      
       window.onload = function () {
        $(".l-pic-index").animate({ left: "98px", top: "20px" }, 1450);
        $(".r-pic-index").animate({ right: "-23px", top: "20px" }, 1450);
        $(".l-bg-index").animate({ width: "433px", left: "73px" }, 1500);
        $(".r-bg-index").animate(
          { width: "433px", right: "-38px" },
          1500,
          function () {
            $(".main-index").fadeIn(800);
          }
        );
      };

效果

结语 （祝福）

好了文章到这就结束了。欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下； 同时也祝大家身体健康，天天开心，万事如意，家和万事兴，小哥哥们越来越帅，小姐姐们越来越美！