지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > HTML로 애니메이션 귀여운 개구리 표현을 만드는 방법에 대한 사례 공유

HTML로 애니메이션 귀여운 개구리 표현을 만드는 방법에 대한 사례 공유

黄舟
풀어 주다： 2017-07-18 14:54:47
원래의
2014명이 탐색했습니다.
먼저 모든 이모티콘을 느껴보세요:


시작하기 전에 알아둘 점: Flex elastic 레이아웃

  • 우리는 일반적으로 float 방식을 사용하여 수평 3열 레이아웃을 만들고, 표시된 각 블록을 플로팅합니다. 같은 줄. 이 방법을 사용하면 요소에 원래 높이 속성이 없게 되며 공간 점유 문제를 해결하려면 플로트를 지워야 합니다. 예를 들어, 수직 센터링은 달성하기 쉽지 않습니다.

  • 2009년 W3C는 다양한 페이지 레이아웃을 간단하고 완전하며 반응적으로 구현할 수 있는 Flex 레이아웃이라는 새로운 솔루션을 제안했습니다. 현재 거의 모든 브라우저에서 지원되므로 이제 이 기능을 사용해도 안전합니다. 기본 문법은 블로그를 확인하세요: Flex 레이아웃 튜토리얼: 문법

  • 또한 CSS의 의사 요소에 대해 어느 정도 이해해야 합니다. 전, 후

  • 마지막으로 표현식을 움직이게 하려면, 가장 중요한 것은 사용되는 애니메이션 속성입니다.

전체 레이아웃

먼저 각 표정이 각 위치에서 직관적으로 표시될 수 있도록 전체 시트를 배치합니다. 각 표정이 거의 정사각형 공간을 차지하므로 각 개구리 표정을 가로로 배열합니다. 페이지에 표시되는 플렉스 레이아웃은 다음과 같습니다. 여기에 사용되었습니다. 

<p class="container">
<!--所有表情的存放容器，flex布局，所有子项目水平显示，自动换行，水平居中显示，竖直方向从顶部开始-->
<p class="emoji-container">   
<!--存放青蛙表情的大容器，控制大小间距之类的属性-->    
<p class="icon">       
<!--存放每一个青蛙表情的容器，控制每一个表情自己的位置和特征-->    
<p class="frog" id="frog-n"></p></p></p></p>
body {background-color: #F1FFE6;}
.container {width: 950px;margin: 70px auto 0px auto;text-align: center;}
.container .emoji-container {
/*flex弹性布局，多用于左右并排布局，跟float的作用类似，不用清除浮动*/
display: -webkit-box;   
display: -ms-flexbox;
display: flex;
/*justify-content属性定义了项目在主轴上的对齐方式。center就是在x轴上居中显示*/
-ms-grid-column-align: center;
    justify-items: center;
/*align-items属性定义项目在交叉轴上如何对齐。flex-start就是从y轴的最上端开始排列*/
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: flex-start;
/*flex-wrap属性定义，如果一条轴线排不下，如何换行。wrap：换行，第一行在上方。*/
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.container .emoji-container .icon {
margin-right: 40px;
margin-bottom: 40px;
}
.container .emoji-container .icon:nth-child(6n) {
margin-right: 0px;
}
.icon {width: 125px;height: 120px;position: relative;}
.icon .frog {position: absolute; top: 0;left: 0;width: 100%;height: 100%;}
로그인 후 복사
개구리의 보편적인 스타일

각개구리의 표정을 관찰해보세요. 표정은 각각 다르지만 몸, 입, 눈, 작은 홍당무의 위치와 크기는 거의 동일합니다. 공통 스타일로 작성하고, 각 개구리의 특성에 따라 각 개인의 ID를 기반으로 단일 스타일을 작성하여 다시 그리거나 덮어쓸 수 있습니다. 

<p class="frog" id="frog-1">
      <!-- 蛙蛙的身体部分 -->
      <p class="body">
        <!-- 蛙蛙的嘴巴 -->
        <p class="mouth"></p>
      </p>
      <!-- 蛙蛙的眼睛 -->
      <p class="eyes">
        <!-- 蛙蛙的左右眼睛 -->
        <p class="eye eye-left">
          <!-- 蛙蛙的内眼圈儿 -->
          <p class="eye-inner">
            <!-- 蛙蛙的眼珠 -->
            <p class="pupil">
              <!-- 蛙蛙眼圈里的光晕 -->
              <p class="light"></p>
            </p>
          </p>
        </p>
        <p class="eye eye-right">
          <p class="eye-inner">
            <p class="pupil">
              <p class="light"></p>
            </p>
          </p>
        </p>
      </p>        
    </p>
    /*蛙蛙身体部分样式*/
    .icon .frog .body {
    width: 110px;
    height: 86px;
    background-color: #A3D768;                   
    border-radius: 50%;
    position: absolute;
    top: 25px;left: 0;
    right: 0;                    
    margin: auto;box-shadow: 4px 4px 0px 0px rgba(163, 215, 104, 0.3);
}
/*蛙蛙嘴巴部分样式，因为每个蛙蛙的嘴巴不一样，所以公共样式就只定义了位置*/
.icon .frog .body .mouth {
margin: auto;
}
.icon .frog .eyes {
width: 86px;
height: 35px;
position: absolute;                   
top: 8px;
left: 0;right: 0;
margin: auto;
}
/*蛙蛙眼睛部分样式*/
.icon .frog .eyes .eye {width: 35px;height: 35px;}
.icon .frog .eyes .eye:before {content: "";display: block;width: 100%;height: 100%;                               
background-color: #A3D768;border-radius: 50%;
}
/*蛙蛙眼圈部分样式*/
.icon .frog .eyes .eye .eye-inner {background-color: #fff;width: 80%;height: 80%;          
position: absolute;top: 10%;left: 10%;border-radius: 50%;
}
/*蛙蛙眼珠部分样式*/
.icon .frog .eyes .eye .eye-inner .pupil {background-color: #3F6A34;          
width: 60%;height: 60%;position: absolute;top: 20%;left: 20%;border-radius: 50%;
}
/*蛙蛙眼珠里的亮光部分样式*/
.icon .frog .eyes .eye .eye-inner .pupil .light {background-color: #fff;          
width: 50%;height: 50%;position: absolute;top: 10%;left: 10%;border-radius: 50%;
}
/*蛙蛙左右两边眼睛的位置*/
.icon .frog .eyes .eye-left {position: absolute;top: 0px;left: 0;}.icon .frog .eyes .eye-right {position: absolute;top: 0px;right: 0;}
로그인 후 복사


개구리 기본 공통 스타일.png

첫 번째 꼬마 개구리
첫 번째 꼬마 개구리

첫 번째 꼬마 개구리는 기본 스타일을 바탕으로 입꼬리가 올라가는 다이나믹한 효과를 주어 완성합니다. 첫 번째 개구리를 그리는 경우에는 공통 스타일을 기반으로 입의 애니메이션만 추가하면 되며 돔 구조는 동일합니다. 

.frog#frog-1 .body .mouth {
width: 18px;height: 22px;
border-bottom: 3px solid #3F6A34;
position: absolute;top: 6px;left: 0;right: 0;
-webkit-animation: smile 3.8s linear 0s infinite;        
animation: smile 3.8s linear 0s infinite;
}
@-webkit-keyframes smile {
0% {  border-radius: 0%;
}
20% {  border-radius: 50%;
}
70% {  border-radius: 50%;
}
}
@keyframes smile {
0% {  border-radius: 0%;
}
20% {  border-radius: 50%;
}
70% {  border-radius: 50%;
}
}
로그인 후 복사


첫 번째 개구리 animation.gif

두 번째 개구리

    두 번째 개구리는 입이 크고, 볼에 작은 홍조가 두 개 있고, 눈이 빨개요. 심장이 있어서 얼굴이 빨개지는 P 돔 구조에 추가해야 하며 이에 따라 입과 눈의 스타일도 수정해야 합니다. (주로 입, 홍조, 붉은 하트 만들기) 

    <p class="frog" id="frog-2">    
      <p class="body">
        <!--存放蛙蛙的脸颊红晕-->
        <p class="blush"></p>
       <!--加上大嘴巴的class big-month-->
        <p class="mouth big-mouth"></p>
      </p>    
      <p class="eyes">
        <p class="eye eye-left">
          <p class="eye-inner">
            <p class="pupil">
              <p class="light"></p>
            </p>
          </p>
        </p>
        <p class="eye eye-right">
          <p class="eye-inner">
            <p class="pupil">
              <p class="light"></p>
            </p>
          </p>
        </p>
      </p>        
    </p>/*第二只青蛙脸颊两边的红晕样式*
    /.icon .frog .body .blush {width: 75px;height: 9px;position: absolute;            
    top: 20px;left: 0;right: 0;margin: auto;
}
.icon .frog .body .blush:before, .icon .frog .body .blush:after {            
content: "";
display: block;width: 12px;height: 100%;background-color: #F7D2C9;border-radius: 50%;
}
.icon .frog .body .blush:before {position: absolute;top: 0;left: 0;}
.icon .frog .body .blush:after {position: absolute;top: 0;right: 0;}
/*第二只青蛙的嘴巴样式，用圆角和阴影的方式制作而成*/
.icon .frog .body .big-mouth {width: 30px;height: 20px;border-radius: 0 0 50% 50%;            
box-shadow: 2px 2px 0px 0px rgba(63, 106, 52, 0.3);
}
.frog#frog-2 .mouth {background-color: #fff;position: absolute;top: 30px;left: 0;right: 0;
}
/*第二只青蛙的眼睛样式，将眼圈的背景设置为透明色，圆圈里面的亮光隐藏*/
.frog#frog-2 .eye-inner {top: 17%;background-color: transparent !important;
-webkit-animation: hearts 0.6s linear 0s infinite alternate;        
animation: hearts 0.6s linear 0s infinite alternate;
}
@-webkit-keyframes hearts {0% {
  -webkit-transform: scale(0.7);          
  transform: scale(0.7);
}100% {
  -webkit-transform: scale(1);          
  transform: scale(1);
}
}
@keyframes hearts {0% {
  -webkit-transform: scale(0.7);          
  transform: scale(0.7);
}100% {
  -webkit-transform: scale(1);          
  transform: scale(1);
}
}
/*第二只青蛙的眼睛的爱心样式，左上角和右上角设置交圆角50%，然后左右对应的旋转45度合并成一个爱心的形状*/
.frog#frog-2 .eye-inner:before, .frog#frog-2 .eye-inner:after {content: "";display: block;          
height: 70%;width: 40%;background-color: #C71F1C;border-radius: 50% 50% 0 0;
}
.frog#frog-2 .eye-inner:before {position: absolute;top: 0;left: 5px;
           -webkit-transform: rotate(-45deg);                    
           transform: rotate(-45deg);
}
.frog#frog-2 .eye-inner:after {position: absolute;top: 0;right: 5px;
            -webkit-transform: rotate(45deg);                    
            transform: rotate(45deg);
}
.frog#frog-2 .eye-inner .pupil {display: none;}
    로그인 후 복사

두 번째 개구리 animation.gif

세 번째 개구리

  • 세 번째 개구리의 대중적인 스타일에 대한 변화 변화입니다 눈과 입이 그려져 있기 때문에 가장 중요한 것은 왼쪽 눈 스타일과 입 스타일을 그리는 것입니다.

  • 타원을 해당 각도로 회전시킨 후 이마를 눌러 입으로 덮이는 부분을 만들어 만든 혀입니다.


    세 번째 개구리의 혀가 분해되어 표시됩니다.png

<p class="frog" id="frog-3">
        <p class="body">
          <p class="mouth">
            <!--存放舌头样式的容器-->
            <p class="toungue"></p>
          </p>
        </p>
        <p class="eyes">
          <!--左眼添加wink的样式，作为左眼眯眼样式-->
          <p class="eye eye-left wink">
            <p class="eye-inner">
              <p class="pupil">
                <p class="light"></p>
              </p>
            </p>
          </p>
          <p class="eye eye-right">
            <p class="eye-inner">
              <p class="pupil">
                <p class="light"></p>
              </p>
            </p>
          </p>
        </p>    
      </p>
/*第三只小青蛙的左眼眯眼样式*/
.icon .frog .eyes .eye.wink .eye-inner {
  background-color: transparent;
  width: 17px;
  height: 3px;
  background-color: #3F6A34;
  border-radius: 0;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: rotate(21deg);
          transform: rotate(21deg);
}
.icon .frog .eyes .eye.wink .eye-inner:before, .icon .frog .eyes .eye.wink .eye-inner:after {
  content: &#39;&#39;;
  display: block;
  width: 17px;
  height: 3px;
  background-color: #3F6A34;
}
.icon .frog .eyes .eye.wink .eye-inner:before {
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
  position: absolute;
  top: -4px;
  left: 0;
}
.icon .frog .eyes .eye.wink .eye-inner:after {
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
  position: absolute;
  top: 4px;
  left: 0;
}
.icon .frog .eyes .eye.wink .pupil {
  display: none;
}
/*第三只小青蛙的右眼亮光位置*/
.frog#frog-3 .eye-right .light {
  position: absolute;
  top: 10%;
  left: auto;
  right: 10%;
}
/*第三只小青蛙的嘴巴吐舌头样式*/
.frog#frog-3 .mouth {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  -webkit-transform: rotate(23deg);
          transform: rotate(23deg);
}
.frog#frog-3 .mouth:before {
  content: "";
  display: block;
  border-bottom: 3px solid #3F6A34;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #A3D768;
  z-index: 3;
  position: absolute;
  top: 0px;
  left: 0;
}
.frog#frog-3 .toungue {
  width: 16px;
  height: 20px;
  background-color: #C71F1C;
  border-radius: 30px;
  z-index: 2;
  position: absolute;
  top: 17px;
  left: 4px;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-animation: toungue 2.0s linear 0s infinite;
          animation: toungue 2.0s linear 0s infinite;
}
@-webkit-keyframes toungue {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  75% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
  }
}
@keyframes toungue {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  75% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
  }
}
.frog#frog-3 .toungue:before {
  content: "";
  display: block;
  width: 2px;
  height: 4px;
  background-color: #410a09;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 5px;
  margin: auto;
  opacity: 0.4;
}
로그인 후 복사

HTML로 애니메이션 귀여운 개구리 표현을 만드는 방법에 대한 사례 공유

세번째 개구리 animation.gif

네번째 꼬마개구리

네번째 꼬마개구리의 공개스타일과의 변화는 눈과 입의 변화입니다. 눈알 안쪽에 두 개의 밝은 점이 있습니다. , 그리고 입은 큰 입입니다. 열고 닫을 수 있으며 입에는 작은 혀가 있습니다. 그 후광이 잠시 사라진 상태입니다. 

<p class="frog" id="frog-4">
      <p class="body">
        <p class="mouth big-mouth">
          <p class="toungue"></p>
        </p>
      </p>    
      <p class="eyes">
        <!--控制另一个眼珠闪光点的样式extra-light-->
        <p class="eye eye-left extra-light">
          <p class="eye-inner">
            <p class="pupil">
              <p class="light"></p>
            </p>
          </p>
        </p>
        <p class="eye eye-right extra-light">
          <p class="eye-inner">
            <p class="pupil">
              <p class="light"></p>
            </p>
          </p>
        </p>
      </p>
    </p>
/*第四只小青蛙眼珠另一个闪光点样式*/
.icon .frog .eyes .eye.extra-light .light {width: 40%;height: 40%;}
.icon .frog .eyes .eye.extra-light .light:before {content: "";display: block;width: 70%;
            height: 70%;background-color: #fff;border-radius: 50%;
}
로그인 후 복사

HTML로 애니메이션 귀여운 개구리 표현을 만드는 방법에 대한 사례 공유

네번째 개구리 animation.gif

남은 다른 개구리들

다른 개구리들의 그리는 방법은 일반적인 스타일을 바탕으로 독특한 스타일을 작성하는데, 가장 중요한 것은 애니메이션 프레임 컨트롤, 다양한 모양은 기본 기하학적 도형의 접합(사각형, 테두리 반경, 변환 및 위치의 합리적인 사용)

코드 양이 너무 많아서 기사에서는 자세히 다루지 않겠습니다. 가장 중요한 것은 애니메이션 프레임을 능숙하게 사용하는 것입니다! (중요한 말을 세 번 말하세요)

위 내용은 HTML로 애니메이션 귀여운 개구리 표현을 만드는 방법에 대한 사례 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
html 시리즈
원천：php.cn
이전 기사：HTML 샘플 코드를 공유하여 애니메이션 도라에몽 만들기 다음 기사：HTML을 사용하여 페이지에 이미지를 업로드하고 표시용 샘플 코드를 공유하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 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
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿