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

먼저 모든 이모티콘을 느껴보세요:

시작하기 전에 알아둘 점: 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;
}

세번째 개구리 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%;
}

네번째 개구리 animation.gif

남은 다른 개구리들

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

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

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