HTML + CSS + JS 完美展现：3D 方块弹跳动画特效 [完整指南]

2023-09-17 02:37:21

HTML + CSS + JS 实现 3D 方块弹跳动画

3D 动画以其逼真的视觉效果和交互性而备受青睐。本指南将指导您使用 HTML、CSS 和 JavaScript 创建一个令人印象深刻的 3D 方块弹跳动画。无论是作为前端开发人员、网页设计师还是动画爱好者，您都将从本指南中受益匪浅。我们将在 HTML 中构建 3D 方块模型，在 CSS 中添加动画样式，并在 JavaScript 中控制动画行为。准备好释放您的创造力了吗？让我们开始吧！

步骤 1：HTML 中构建 3D 方块模型

首先，我们需要在 HTML 中构建 3D 方块模型。我们将使用 <div> 元素来创建方块的各个面，并使用 CSS 来定义它们的样式。

<div class="cube">
  <div class="front-face"></div>
  <div class="back-face"></div>
  <div class="left-face"></div>
  <div class="right-face"></div>
  <div class="top-face"></div>
  <div class="bottom-face"></div>
</div>

步骤 2：CSS 中添加动画样式

接下来，我们需要在 CSS 中添加动画样式来实现 3D 方块的弹跳效果。我们将使用 CSS3 的 transform 和 animation 属性来定义动画行为。

.cube {
  width: 100px;
  height: 100px;
  perspective: 1000px;
}

.cube div {
  width: 100%;
  height: 100%;
  position: absolute;
}

.front-face {
  background-color: red;
  transform: translateZ(50px);
}

.back-face {
  background-color: blue;
  transform: rotateY(180deg) translateZ(50px);
}

.left-face {
  background-color: green;
  transform: rotateY(-90deg) translateZ(50px);
}

.right-face {
  background-color: yellow;
  transform: rotateY(90deg) translateZ(50px);
}

.top-face {
  background-color: orange;
  transform: rotateX(90deg) translateZ(50px);
}

.bottom-face {
  background-color: purple;
  transform: rotateX(-90deg) translateZ(50px);
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

.cube:hover {
  animation: bounce 1s infinite alternate;
}

步骤 3：JavaScript 中控制动画行为

最后，我们需要在 JavaScript 中控制动画行为。我们将使用 JavaScript 来检测鼠标悬停事件并触发动画。

const cube = document.querySelector('.cube');

cube.addEventListener('mouseover', () => {
  cube.classList.add('bounce');
});

cube.addEventListener('mouseout', () => {
  cube.classList.remove('bounce');
});