Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > An animated picture of a kitten smiling face realized in html

An animated picture of a kitten smiling face realized in html

零下一度
Release： 2017-06-24 13:09:05
Original
4514 people have browsed it
Cat Container

  • Every time we draw a picture, we must first determine a container and determine the position and size of the graphic. 

    <div class="mao_box">
  <div class="mao"></div>
</div>body {margin: 0px;background: #F6F7A7;}.mao_box {position: relative;top: 50px ;}/*设置宽度并且居中显示*/.mao {margin: 0 auto;width: 400px;}
    Copy after login
Draw the cat’s head and the patterns on its head

  • According to painting habits, we must draw the largest head first. Once the head is determined, the position of the ears and mouth can be determined. 

    <!-- 猫咪的头部框架 -->
      <div class="mao_head">
          <div class="huawen">
              <div><!--头部花纹——左边橙色--></div>
          </div>
      </div>.mao_head {  width: 400px;    /*设置高度和宽度*/  height: 340px;  background: #F6F7F2;   
  position: relative;  border-radius: 50% 50% 35% 35%;   /*画出猫脸的形状*/  border: solid 2px #2e2e2e;  /*给猫咪画一个偏黑色的边框*/  overflow: hidden;  z-index: 10;
}.huawen {  position: absolute;  height: 160px;   /*设置宽度和高度*/  width: 180px;  background: #8D8D8D;  left: 110px;      /*距离猫脸左面110px的位置，正好在中间位置 (400-180)/2*/  border-radius: 0% 0% 50% 50%;   /*画出花纹的形状，下面为圆角边框*/  overflow: hidden;    /*花纹超出头部的部分隐藏*/
}.huawen > div:first-child {   /*花纹的左右两边颜色不一样，所以改变左边半边的颜色为橙色*/      height: 160px;      width: 90px;    /*宽度和花纹总宽度的一半*/      background: #F0AC6B;
  }
    Copy after login

    Cat head.png
##Draw the cat’s ears
  • The cat’s ears are distributed on the left and right sides of the head, so they must be drawn from two divs. In order not to look so stiff, we can draw the ears on both sides to be slightly different in size.

  • You must be thinking: The shape of the ears is so strange, how did you draw it? In fact, it is very simple. Just use a rectangle and set the border-radius at each angle to form a sharp-angle effect, and then rotate the corresponding angle to fit the head.

  • Finally, hide the ears behind the face and expose a little of the ear tips. 

    <!--绘制耳朵的容器-->
<div class="erduo">
          <div></div><!--绘制左耳-->
          <div></div><!--绘制右耳-->
      </div>/*耳朵*/.erduo {  width: 374px;   /*设置耳朵容器的高度和宽度*/  height: 120px;  position: absolute;  top: -6px;   /*将耳朵的位置放到对应的地方*/  left: 50%;  margin-left: -187px;
}  /*左耳*/  .erduo > div:first-child {      height: 200px;  /*设置左耳的高度和宽度*/      width: 160px;      border: 2px solid #2e2e2e;  /*给左耳设置一个边框*/      background: #f3f3f3;      border-radius: 4% 80% 0% 50%;  /*设置左耳各个角度的圆角程度*/      transform: rotate(-15deg);  /*设置左耳的旋转角度*/
      -ms-transform: rotate(-15deg);
      -moz-transform: rotate(-15deg);
      -webkit-transform: rotate(-15deg);
      -o-transform: rotate(-15deg);  
      position: absolute;      left: -20px;      top: 0px;      transition: transform 1s,left 1s;    /*设置左耳的hover动效*/
  }  /*右耳跟左耳的画法同理*/  .erduo > div:last-child {      height: 180px;      width: 160px;      border: 2px solid #2e2e2e;      background: #f3f3f3;      transform: rotate(15deg);
      -ms-transform: rotate(15deg);
      -moz-transform: rotate(15deg);
      -webkit-transform: rotate(15deg);
      -o-transform: rotate(15deg);      border-radius: 80% 4% 50% 0%;      position: absolute;      right: -20px;      top: 0px;transition: transform 1s,right 1s;
  }
    Copy after login


    Ears.jpg
    • ##Draw the cat’s eyes
    The eyes are a bit complicated. It is difficult to draw without careful study and strong imagination: anatomy is that the upper and lower ovals are overlapped, and the excess part is hidden. The brown eyeball in the middle is rounded on top. A black rectangle in the shape. 
  • <div class="yanjing">
          <div>
              <div class="yanquan">
                  <div></div>  <!--存放竖着的眼球的div-->
              </div>
              <div class="yanquan_hedding">  <!--存放眼睛下睫毛的div-->
              </div>
              <div class="hong"></div>
          </div>
          <div class="yan_right">
              <div class="yanquan">
                  <div></div>
              </div>
              <div class="yanquan_hedding">

              </div>
              <div class="hong"></div>
          </div>
          <div style="clear:both"></div>
</div>/*眼睛*/.yanjing {  height: 60px;   /*设置眼睛整体的高度和宽度，多余的部分隐藏*/  width: 300px;  position: absolute;  /*设置眼睛的位置，使它定位在脸部中间*/  top: 200px;  z-index: 20;  left: 50%;  margin-left: -150px;  overflow: hidden;
}/*左眼*/.yanquan {  height: 100px;  /*设置左眼的高度和宽度，多余的部分隐藏*/  width: 100px;  border: 2px solid #2e2e2e;  border-radius: 50% 50% 50% 50%;  overflow: hidden;  position: absolute;
}/*黑色眼珠子 左*/  .yanquan > div {      height: 100px;      width: 30px;      background-color: #2e2e2e;      margin-left: 35px;   /*将黑色眼珠子定义在眼睛的中间*/      transition:all 1s;
  }/*眼睛下睫毛部分*/.yanquan_hedding {  height: 100px;  width: 180px;  border-top: 2px solid #2e2e2e;  border-radius: 50% 50% 50% 50%;  background: #F6F7F2;   /*背景色脸部的背景色一样，这样就只能看见上边框了*/  margin-top: 50px;   /*定义位置与眼睛融为一体*/  margin-left: -40px;  position: absolute; 
   transition: margin-top 1s;    /*为后面的hover动态做准备*/
}/*右边眼睛的整体定义，其它都跟左眼一样，就是位置不一样*/.yan_right {  left: 196px;  top: 0px;  position: absolute;
}
    Copy after login

    Cat eyes.jpg
    ##Draw the cat’s facial pattern
A cat’s whiskers are very important. If you accidentally cut them, it will be very serious. The cat will no longer be able to measure how big a hole it can get into, haha.

  • If you look carefully, the pattern is actually composed of 5 lines on the left and right. Just draw the lines and make corresponding transformations. 
    • <div class="face_huawen">
      <!-- 存放花纹的div -->
          <div class="face_huawen_huawen huawen_left">
          <!-- 存放每一个线条的div -->
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
          </div>
          <div class="face_huawen_huawen huawen_right">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
          </div>
          <div style="clear:both"></div>
      </div>/*脸部花纹*//*左边花纹*/.face_huawen {  height: 80px;     /*设置花纹整体的高度和宽度*/  width: 380px;  position: absolute;  /*设置花纹在脸部的位置*/  top: 190px;  z-index: 20;  left: 50%;  margin-left: -190px;
}.face_huawen_huawen > div:first-child {  /*设置第一条花纹的宽高和变化情况（圆角大小和旋转角度）*/  width: 30px;  height: 10px;  border-top: 6px #E53941 solid;  border-radius: 30% 80% 20% 50%;  transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  -o-transform: rotate(25deg);  margin-left: 20px;
}.face_huawen_huawen > div:nth-child(2) { /*设置第二条花纹*/  width: 20px;  height: 6px;  background-color: #E53941;  border-radius: 50% 50% 50% 50%;  transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  -o-transform: rotate(25deg);  margin-left: 20px;
}.face_huawen_huawen > div:nth-child(3) {/*设置第三条花纹*/  /*margin-top:10px;*/  width: 32px;  height: 10px;  border-bottom: 4px #E53941 solid;  border-radius: 30% 0% 90% 30%;  transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  -o-transform: rotate(25deg);  margin-left: 8px;
}.face_huawen_huawen > div:nth-child(4) {/*设置第四条花纹*/  margin-top: 20px;  width: 26px;  height: 20px;  border-bottom: 4px #E53941 solid;  border-radius: 30% 0% 90% 30%;  transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);  margin-left: 28px;
}.face_huawen_huawen > div:last-child {/*设置第二五条花纹*/  width: 22px;  height: 10px;  border-bottom: 3px #E53941 solid;  border-radius: 0% 0% 50% 50%;  transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -moz-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);  margin-left: 40px;  margin-top: -8px;
}/*右边花纹，右边花纹的位置和旋转角度跟左边花纹不一样，其它变换都一样*/.huawen_right {  
  float: right;  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
  -moz-transform: rotateY(180deg); /* Firefox */  margin-top: -85px;
}
    Copy after login

  • Cat face pattern.jpg
    Drawing the cat’s nose
I feel that this is the best part to draw on the whole cat. A simple semicircle can solve the problem~La la la la~
    <div class="bizi">
          <div></div>
      </div>/*鼻子，不多做解释了，方法都差不多：确定位置和形状即可*/.bizi {  width: 30px;  height: 36px;  position: absolute;  left: 50%;  margin-left: -15px;  top: 260px;  z-index: 30;
}  .bizi > div {      width: 30px;      height: 10px;      border-bottom: 8px solid #2e2e2e;      border-radius: 0% 0% 50% 50%;      margin-top: -10px;
  }
    Copy after login

  • The cat’s nose. png
    Drawing a cat’s mouth
Eh? Don’t you feel like you’ve reached the last part as you continue to draw? Hahahahahaha, I’m so happy~ I’m happy to grow again~

  • The mouth is like two mustaches, with two A rectangular border can be achieved. 
    • <div class="zuiba_box">
          <div class="zuiba">
              <div></div>
              <div></div>
          </div>
      </div>.zuiba {  /*设置嘴巴的位置*/  margin-left: 85px;  margin-top: 6px;
}  /*右半边嘴巴*/  .zuiba > div:first-child  {      width: 50px;      height: 40px;      border-bottom: 4px solid #2e2e2e;   /*设置底部和左边边框，形成直角矩形*/      border-left: 4px solid #2e2e2e;      border-radius:40% 0% 20% 50%;  /*设置各边的圆角程度*/      margin-left: 13px;      margin-top: -26px;      position:absolute;      transition:  border-radius  1s;  /*为动效做过渡效果*/
  }  /*左半边嘴巴*/  .zuiba > div:nth-child(2) {      width: 50px;      height: 40px;      border-bottom: 4px solid #2e2e2e;      border-right: 4px solid #2e2e2e;      border-radius:0% 40% 50% 20%;      margin-left: -38px;      margin-top: -26px;      position:absolute;      transition:  border-radius  1s;       
  }
    Copy after login

  • Cat mouth.jpg
    ##The various parts are spliced ​​into a complete kitten
After all the parts are drawn, it’s time to put together a puzzle like Dabai, haha~ let’s put together a cute kitten~ (mainly the use of the transition attribute, after setting: hover attributes, and then use transition to set the attributes to complete the transition time of the change)


  • Puzzle--Haha.jpg

    Create a dynamic effect when the mouse moves up
Our furball is a guy who moves like a rabbit, so let’s add some special effects to the cat~(
^ __^
    )

  • After moving the mouse up, the ears will swing left and right

  • The eyes will squint to look like a smiling face

  • The corner of the mouth is raised

    /*鼠标浮动耳朵样式*/.mao:hover .erduo > div:first-child {  left: -10px;  transform: rotate(0deg);  -ms-transform: rotate(0deg);  -moz-transform: rotate(0deg);  -webkit-transform: rotate(0deg);  -o-transform: rotate(0deg);  border-radius: 4% 80% 0% 60%;
}.mao:hover .erduo > div:last-child {  right: -10px;  transform: rotate(0deg);  -ms-transform: rotate(0deg);  -moz-transform: rotate(0deg);  -webkit-transform: rotate(0deg);  -o-transform: rotate(0deg);  border-radius: 80% 4% 60% 0%;  /*transition: transform 1s,right 1s;*/
}/*眯眼并且出现红晕的动态效果，眼珠的宽度变宽*/.mao:hover .yanquan > div:first-child {width:40px;  margin-left: 30px;
}.hong {  position: absolute;  height: 28px;  width: 70px;  background: red;  top: 34px;  /*top: 64px;*/  left: 18px;  border-radius: 50% 50% 50% 50%;  background-image: -moz-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);  background-image: -webkit-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);  background-image: -ms-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);  opacity: 0.0;  /*transition: opacity 0.5s ease-in 0.2s;*/
}/*眼睛浮动属性*/.mao:hover .yanquan_hedding {  margin-top: 30px;  /*transition: margin-top 1s;*/
}.mao:hover .hong {  /*top: 34px;*/  opacity: 0.8;  transition: opacity 0.5s ease-in 0.2s;
}/*嘴巴上扬的效果*/.mao:hover .zuiba > div:first-child {  border-radius: 50% 50% 50% 50%;width: 40px;
}.mao:hover .zuiba > div:nth-child(2) { 
       width: 40px;margin-left: -30px;border-radius: 50% 50% 50% 50%;
}
    Copy after login
  • PS: After squinting the eyes, a part of the redness appears below. It is composed of two small ovals with a translucent background color. Just move the mouse up. Just display the ellipse.

    Redness under the eyes.png

    • If you encounter any problems during the learning process or want to obtain learning resources, you are welcome to join the learning exchange group

The above is the detailed content of An animated picture of a kitten smiling face realized in html. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
html animation kitten build series
source：php.cn
Previous article：Example tutorial of html basics from form Next article：div+css simulates select drop-down box example code
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
PX automatic conversion to REM error  <style>html {   font-size: calc(100vw / 3.75);      }...
From 2024-04-16 09:34:16
0
0
4687
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
How to use laravel components with livewire lazy placeholder I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...
From 2024-04-06 20:02:10
0
2
543
Top-level method to replace a string with HTML code (generated from an array) Given a string like this...$htmlPattern="Usernameis:#name#andusercompanyis#company#&q...
From 2024-04-06 17:40:41
0
2
410
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template