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

CSS加载动画效果是网站中常见的元素之一。本文将介绍如何使用CSS制作超萌吃豆豆加载动画效果。

1. HTML 结构

在HTML文档中，我们需要建立一个包含吃豆豆的容器。代码如下：

<div class="loading">

  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

可以看到，我们使用了一个class为loading的div元素，并在其内部嵌套5个class为dot的div元素，分别用来代表吃豆豆。

2. CSS 样式

我们需要对上述的HTML元素进行一些CSS样式的设置，以达到我们需要的动画效果。代码如下：

/* 加载容器 */

.loading {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5vw;
  height: 5vw;
}
/* 圆点 */
.dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.8vw;
  height: 0.8vw;
  margin-left: -0.4vw;
  border-radius: 50%;
  background-color: #FFB6C1;
  box-shadow: 0 0.2vw #FFB6C1, 0 -0.2vw #FFB6C1;
  animation: dot 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
/* 动画 */
@keyframes dot {
  0% {
    transform: translateY(0);
    box-shadow: 0 0.2vw #FFB6C1, 0 -0.2vw #FFB6C1;
  }
  100% {
    transform: translateY(2.5vw);
    box-shadow: 0 1vw #FFB6C1, 0 -1vw #FFB6C1;
  }
}
/* 为吃豆豆编号 */
.dot:nth-of-type(1) {
  animation-delay: 0.1s;
}
.dot:nth-of-type(2) {
  animation-delay: 0.2s;
}
.dot:nth-of-type(3) {
  animation-delay: 0.3s;
}
.dot:nth-of-type(4) {
  animation-delay: 0.4s;
}
.dot:nth-of-type(5) {
  animation-delay: 0.5s;
}

我们可以看到，通过设定容器的display、justify-content、align-items等属性，实现了居中显示和自适应的效果。对于每个div.circle元素，通过设定其position为absolute和top、left百分比值来实现相对位置的设定。为了实现吃豆豆动画，我们使用了CSS动画技术，运用CSS关键帧动画，设定样式变化和动画持续的时间，从而实现小圆点对于Y轴的移动。

3. 总结

通过以上的CSS样式的设置，我们成功实现了一个超萌的吃豆豆加载动画效果。这也表明了CSS在网站设计中的重要性。