css制作超萌吃豆豆加载动画效果

你好，要制作“css制作超萌吃豆豆加载动画效果”，可以按照以下步骤进行：

步骤一：准备工作

在 html 文件中引入 CSS 样式表，在 head 标签中添加以下代码：

<link rel="stylesheet" href="path/to/your/css/file.css">

步骤二：HTML 结构

在 HTML 文件中添加以下代码：

<div class="pacman">
  <div class="eye"></div>
  <div class="mouth"></div>
</div>

步骤三：CSS 样式

添加以下 CSS 样式：

/* pacman */
.pacman {    
    width:64px;    
    height:64px;
    position:relative;
}

.pacman .eye {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#FFF;
    position:absolute;
    left:20px;
    top:20px;
}

.pacman .mouth {
    width:25px;
    height:25px;
    background:#F6C029;
    border-radius:0 0 25px 25px;
    position:absolute;
    left:0;
    top:0;
    -webkit-animation: pac_anim 0.2s ease-in-out infinite alternate;
    animation-fill-mode: both;
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin:50% 100%;
    -moz-transform-origin:50% 100%;
    transform-origin:50% 100%;
}

/* 动画 */
@keyframes pac_anim {
    0% {
        transform: rotate(-25deg);
    }
    100% {
        transform: rotate(25deg);
    }
}

步骤四：展现效果

在浏览器中打开 HTML 文件，就可以看到“超萌吃豆豆”的加载动画了。

这里再来举两个示例：

示例 1：多个超萌吃豆豆动画

对步骤三进行一定的修改，改为以下样式：

.pacman-container {
   display:flex;
   justify-content: center;
   align-items:center;
   height:100vh;
}

.pacman {
   width: 64px;
   height: 64px;
   position: relative;
   margin: 0 10px;
}

.pacman .eye {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #FFF;
   position: absolute;
   left: 20px;
   top: 20px;
}

.pacman .mouth {
   width: 25px;
   height: 25px;
   background: #F6C029;
   border-radius: 0 0 25px 25px;
   position: absolute;
   left: 0;
   top: 0;
   -webkit-animation: pac_anim 0.2s ease-in-out infinite alternate;
   animation-fill-mode: both;
   -webkit-transform-origin: 50% 100%;
   -ms-transform-origin: 50% 100%;
   -moz-transform-origin: 50% 100%;
   transform-origin: 50% 100%;
}

/*动画*/
@keyframes pac_anim {
   0% {
      transform: rotate(-25deg);
   }
   100% {
      transform: rotate(25deg);
   }
}

在 HTML 文件中添加以下代码：

<div class="pacman-container">
  <div class="pacman">
    <div class="eye"></div>
    <div class="mouth"></div>
  </div>
  <div class="pacman">
    <div class="eye"></div>
    <div class="mouth"></div>
  </div>
  <div class="pacman">
    <div class="eye"></div>
    <div class="mouth"></div>
  </div>
</div>

示例 2：修改颜色、大小

对步骤三中的 CSS 样式进行一定的修改，改为以下样式：

/* pacman */
.pacman {
  width: 100px;
  height: 100px;
  position: relative;
}

.pacman .eye {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  left: 40px;
  top: 20px;
}

.pacman .mouth {
  width: 45px;
  height: 45px;
  background: #d9534f;
  border-radius: 0 0 25px 25px;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: pac_anim 0.2s ease-in-out infinite alternate;
  animation-fill-mode: both;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

/* 动画 */
@keyframes pac_anim {
  0% {
    transform: rotate(-25deg);
  }
  100% {
    transform: rotate(25deg);
  }
}

在 HTML 文件中添加以下代码：

<div class="pacman">
  <div class="eye"></div>
  <div class="mouth"></div>
</div>

到这里，就是完整的攻略了，可以实现“css制作超萌吃豆豆加载动画效果”。