吃豆豆

最新推荐文章于 2021-06-18 14:33:57 发布

UKD

最新推荐文章于 2021-06-18 14:33:57 发布

阅读量194

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_52354769/article/details/115487733

版权

笔记专栏收录该内容

1 篇文章

订阅专栏

吃豆豆案例总结

效果图
吃豆豆效果图，静态

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>吃豆豆</title>
    <style>
      body{
        margin: 0;/*外边距*/
        background-color: black;
      }
      .mouth{
        width:200px;
        height: 200px;
        margin-top: 100px;
        border-radius: 100px 100px 100px 100px;
        box-shadow: 300px 0px 0px -80px green,
                    450px 0px 0px -80px green,
                    600px 0px 0px -80px green,
                    750px 0px 0px -80px green;
        animation:peas 1s infinite;
      }
      .mouth-top,.mouth-bottom{
        width: 200px;
        height: 100px;
        background-color: yellow;
        margin-left: 150px;
      }
      .mouth-top{
        border-radius: 100px 100px 0 0;
        /*transform: rotate(-30deg);*//*表示旋转 deg为度数单位 负数为逆时针*/
        /*绑定动画 名称 时间 播放次数（默认为一次）infinite表示循环播放*/
        animation: mouth-top 1s infinite;
      }
      .mouth-bottom{
        border-radius: 0 0 100px 100px;
        /*transform: rotate(30deg);*//*正数为顺时针*/
        animation: mouth-bottom 1s infinite;
      }
      /*css3动画 关键帧 开始 中间 结束*/
      @keyframes mouth-top {
        0%{/*动画开始*/
        transform: rotate(0deg);
        }
        50%{/*动画中间*/
        transform: rotate(-30deg)
        }
        100%{/*动画结束*/
        transform: rotate(0deg);
        }
      }
      @keyframes mouth-bottom {
        0%{/*动画开始*/
          transform: rotate(0deg);
        }
        50%{/*动画中间*/
          transform: rotate(30deg)
        }
        100%{/*动画结束*/
          transform: rotate(0deg);
        }
      }
      @keyframes peas {
         0%{box-shadow:
           300px 0px 0px -80px green,
           450px 0px 0px -80px green,
           600px 0px 0px -80px green,
           750px 0px 0px -80px green;
         }
         50%{box-shadow:
           225px 0px 0px -80px green,
           375px 0px 0px -80px green,
           525px 0px 0px -80px green,
           675px 0px 0px -80px green;
         }
         100%{box-shadow:
           150px 0px 0px -80px green,
           300px 0px 0px -80px green,
           450px 0px 0px -80px green,
           600px 0px 0px -80px green;
         }
       }
    </style>
</head>
<body>
<div class="mouth">
  <div class="mouth-top"></div>
  <div class="mouth-bottom"></div>
</div>
</body>
</html>

HTML部分

主要使用div 以及标签class

<div class="mouth">
  <div class="mouth-top"></div>
  <div class="mouth-bottom"></div>
</div>

分析：
我们将这个黄嘴巴看做成上下两个半圆旋转一定的角度得到的。所以总体上在原有mouth（这里第一个div时用来规划主体的，不能省略。且在完成后不可以让基础的div出现。）的基础上规划两个div标签，分为上下两部分，表示上下两个半圆。

css部分

1.将盒子有矩形调试为圆形。

.mouth{
        width:200px;
        height: 200px;
        margin-top: 100px;
        border-radius: 100px 100px 100px 100px;
        box-shadow: 300px 0px 0px -80px green,
                    450px 0px 0px -80px green,
                    600px 0px 0px -80px green,
                    750px 0px 0px -80px green;
        animation:peas 1s infinite;/*这个标签让球动了起来，在动态部分*/
      }

标签总结：

画圆（基础盒子，不呈现）

border-radius:100px 100px 100px 100px;

border-radius:50%

该标签表示每个边缘逐渐变圆，方向分别为盒子的左上右上右下左下，当四个值相同时可以只写一个。如果在未知盒子的像素大小时，可以直接使用50%来表示圆。

画绿色的小球

box-shadow: 300px 0px 0px -80px green,
           	450px 0px 0px -80px green,
            600px 0px 0px -80px green,
            750px 0px 0px -80px green;

box-shadow 表示盒子的阴影，这里用阴影加以颜色，可以表示小球。
其后面的四个值分别表示 <横向纵向模糊半径大小颜色>。一次画一个小球（阴影），用逗号隔开就可以画多个小球。
ps：最后一个阴影不能加逗号，直接用分号隔开。

2.画黄色的嘴，并且动起来

  .mouth-top,.mouth-bottom{
        width: 200px;
        height: 100px;
        background-color: yellow;
        margin-left: 150px;
      }
      .mouth-top{
        border-radius: 100px 100px 0 0;
        animation: mouth-top 1s infinite;
      }
      .mouth-bottom{
        border-radius: 0 0 100px 100px;
        animation: mouth-bottom 1s infinite;
      }
      @keyframes mouth-top {
        0%{/*动画开始*/
        transform: rotate(0deg);
        }
        50%{/*动画中间*/
        transform: rotate(-30deg)
        }
        100%{/*动画结束*/
        transform: rotate(0deg);
        }
      }
      @keyframes mouth-bottom {
        0%{/*动画开始*/
          transform: rotate(0deg);
        }
        50%{/*动画中间*/
          transform: rotate(30deg)
        }
        100%{/*动画结束*/
          transform: rotate(0deg);
        }
      }

标签总结

1.同时对两个div进行修饰

 .mouth-top,.mouth-bottom{
        width: 200px;
        height: 100px;
        background-color: yellow;
        margin-left: 150px;
      }

对多个div同时进行修饰，每个div中间用逗号隔开。在这个花括号中的标签对这多个div同时有效。

2.分开刻画

  .mouth-top{
        border-radius: 100px 100px 0 0;
        animation: mouth-top 1s infinite;
      }
      .mouth-bottom{
        border-radius: 0 0 100px 100px;
        animation: mouth-bottom 1s infinite;
      }

.mouth-top 中的border-radius: 100px 100px 0 0;将前两个的值定位100px，表示圆弧，后两个值不变，则形成了半圆。
.mouth-top 中的animation: mouth-top 1s infinite;表示绑定动画。动画内容就是让半圆动起来，在@keyframes mouth-top中实现动画。这里这个标签只是绑定动画。animation 后面第一个位置写动画的名称，第二个位置写动画的周期，第三个位置写循环次数（ infinite 表示无限循环）。

3.动画标签

   @keyframes mouth-top {
        0%{
        transform: rotate(0deg);
        }
        50%{
        transform: rotate(-30deg)
        }
        100%{
        transform: rotate(0deg);
        }
      }
      @keyframes mouth-bottom {
        0%{
          transform: rotate(0deg);
        }
        50%{
          transform: rotate(30deg)
        }
        100%{
          transform: rotate(0deg);
        }
      }

@keyframes 是动画标签，该标签是通过关键帧的方式是静态的图形动起来。
标签后面紧接着动画名字如 @keyframes mouth-bottom这里的mouth-bottom就是动画名字，名字用于animation:中绑定。
对每一帧的刻画： transform: rotate(0deg); transform表示旋转图形，rotate表示旋转的角度，角度数用括号标明。
链接每一帧：

 @keyframes 动画名字{
 0%{}
 50%{}
 100%{}
 }

3.让绿色的小球动起来

@keyframes peas {
        0%{box-shadow:
          300px 0px 0px -80px green,
          450px 0px 0px -80px green,
          600px 0px 0px -80px green,
          750px 0px 0px -80px green;
        }
        100%{box-shadow:
          150px 0px 0px -80px green,
          300px 0px 0px -80px green,
          450px 0px 0px -80px green,
          600px 0px 0px -80px green;
        }
      }

使用上面的标签完成。