지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > HTML로 구현된 새끼 고양이 웃는 얼굴의 애니메이션 사진

HTML로 구현된 새끼 고양이 웃는 얼굴의 애니메이션 사진

零下一度
풀어 주다： 2017-06-24 13:09:05
원래의
4520명이 탐색했습니다.
고양이 컨테이너

  • 그림을 그릴 때마다 먼저 컨테이너를 결정하고 그래픽의 위치와 크기를 결정해야 합니다. 

    <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;}
    로그인 후 복사
고양이 머리와 머리의 무늬를 그려주세요

  • 그리는 습관에 따라 가장 큰 머리를 먼저 그려야 머리가 결정되어야 귀와 입의 위치가 결정됩니다. 

    <!-- 猫咪的头部框架 -->
      <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;
  }
    로그인 후 복사

    cat head.png
고양이 귀를 그려주세요

  • 고양이 귀는 머리의 왼쪽과 오른쪽에 분포되어 있으므로 두 개의 div로 그려야 합니다. 그렇게 보이도록... 뻣뻣해지도록 양쪽 귀의 크기를 약간 다르게 만들 수 있습니다.

  • 귀 모양이 이렇게 이상한데 어떻게 그렸지?라고 생각하실 텐데요. 실제로는 매우 간단합니다. 직사각형을 사용하고 각 각도에서 테두리 반경을 설정하여 날카로운 각도 효과를 만든 다음 머리에 맞게 해당 각도를 회전하면 됩니다.

  • 마지막으로 귀를 얼굴 뒤로 숨기고 귀끝을 살짝 노출시켜주세요. 

    <!--绘制耳朵的容器-->
<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;
  }
    로그인 후 복사

    ears.jpg
고양이 눈 그리기

  • 눈은 세심한 연구와 강한 상상력 없이는 그리기가 좀 어렵습니다. 해부하여 만들어집니다. 위쪽 및 아래쪽 타원은 가운데에 있는 갈색 눈알이 위쪽 원에 있는 검은색 직사각형입니다. 

    <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;
}
    로그인 후 복사

    cat eyes.jpg
고양이 얼굴 패턴 그리기

  • 고양이 수염은 아주 중요해요. 실수로 잘라버리면 정말 심각하고 고양이도... 얼마나 큰 구멍에 들어갈 수 있는지 측정할 수 없습니다. 하하.

  • 자세히 살펴보면 패턴은 실제로 왼쪽과 오른쪽에 5개의 선으로 구성되어 있습니다. 선을 그리고 이에 맞게 변형하면 됩니다. 

    <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;
}
    로그인 후 복사

    고양이 얼굴 패턴.jpg
고양이 코를 그려주세요

  • 고양이 전체를 그리는 데는 여기가 가장 좋은 것 같아요. 간단한 반원 하나로 문제가 해결될 수 있어요~라랄랄라~ 

    <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;
  }
    로그인 후 복사

    고양이 코.png
고양이 입을 그려보세요

  • 咦? 계속 그리다 보면 이제 마지막 부분에 다다른 것 같지 않나요? ㅎㅎㅎㅎㅎㅎㅎ 너무 행복해요~ 또 행복하게 성장하고 있어요~

  • 입이 콧수염 두 개로 되어있어요 두 개의 직사각형 테두리. 

    <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;       
  }
    로그인 후 복사

    Catmouth.jpg
다양한 파츠가 엮어져 완성된 새끼 고양이가 됩니다

  • 파츠를 다 그린 후에는 다시 베이맥스처럼 퍼즐을 맞추는 시간, 하하~ 넣어봅시다 같이 같이 귀여운 새끼 고양이를 만들어 보세요~ (주로 전환 속성을 사용하고, 후 속성 설정: 호버 후 전환을 사용하여 속성 설정을 사용하여 변경의 전환 시간을 완료합니다)


    퍼즐--하하. jpg
마우스 움직임의 역동적인 효과 만들기

  • 저희 퍼볼은 토끼처럼 움직이는 녀석이니까 고양이에게 특수효과를 좀 더해볼까요~(^__^)

  • 마우스 움직임 올라간 후 귀가 좌우로 흔들립니다

  • 눈이 가늘게 뜨여 웃는 얼굴 모양을 보여줍니다

  • 입꼬리가 올라가요

    /*鼠标浮动耳朵样式*/.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%;
}
    로그인 후 복사

    PS: 눈을 가늘게 뜨고 난 후 , 아래에 빨간색 부분이 나타나는데 반투명한 배경색을 가진 두 개의 작은 타원입니다. 마우스를 움직이면 타원만 표시되도록 구성되어 있습니다.


    눈 밑 붉은기.png

학습 과정에서 문제가 발생하거나 학습 자료를 얻고 싶다면 학습 교류 그룹에 가입하실 수 있습니다

위 내용은 HTML로 구현된 새끼 고양이 웃는 얼굴의 애니메이션 사진의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
html 생기 주방 짓다 시리즈
원천：php.cn
이전 기사：양식의 HTML 기본 튜토리얼 예시 다음 기사：div+css는 선택 드롭다운 상자 예제 코드를 시뮬레이션합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PX가 REM 오류로 자동 변환  <style>html {   글꼴 크기: calc(100vw / 3.75);      }body {    글꼴 크기: 0.16rem;      }&l...
에서 2024-04-16 09:34:16
0
0
4687
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
문자열을 HTML 코드(배열에서 생성됨)로 바꾸는 최상위 방법 다음과 같은 문자열이 주어지면...$htmlPattern="Usernameis:#name#andusercompanyis#company#";하위 ...
에서 2024-04-06 17:40:41
0
2
410
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿