DIY可爱兔兔加载页面：轻松实现，萌化你的网站！

前端

2023-03-26 12:52:26

DIY萌趣兔兔加载页面：让你的网站瞬间萌化！

在竞争激烈的数字世界中，网站已成为企业和个人的必备。要想从众多网站中脱颖而出，一个精美的网站加载页面至关重要。今天，我们踏上DIY之旅，打造一款萌趣的兔兔加载页面，让你的网站瞬间萌化人心，吸引眼球！

准备工作

材料清单：

HTML和CSS基础知识
文本或代码编辑器
兔兔加载动画所需的图片资源（可自行设计或从网络获取）

兔兔加载动画的实现

HTML结构：

<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="loading">
    <div class="bunny-container">
      <img src="images/bunny.png" alt="兔兔">
    </div>
    <div class="loading-text">
      正在加载...
    </div>
  </div>
</body>
</html>

CSS样式：

/* 兔兔加载页面样式 */

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bunny-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.bunny-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: bunny-hop 2s infinite;
}

@keyframes bunny-hop {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #333;
}