动感切换：掌握CSS展现盒子的卷起、展开动画

2023-10-14 22:43:58

卷起和展开动画：让你的网页动起来

在网页设计中，互动动画可以大大增强用户体验。卷起和展开动画是一种常见的交互效果，它可以用来显示或隐藏内容，让你的网页更生动有趣。借助 CSS 的强大功能，实现这种动画效果变得轻而易举。

理解 HTML 结构

首先，我们需要创建一个 HTML 结构来放置我们的盒子。一个简单的 <div> 元素即可完成这项工作：

<div id="box">
  <p>这是一个盒子</p>
</div>

使用 CSS 定义样式

接下来，我们需要给这个盒子添加 CSS 样式，以便它能够响应交互。

设置初始状态

我们首先要设置盒子的初始状态，这里我们将其设置为隐藏：

#box {
  display: none;
}

创建动画关键帧

接下来，我们需要创建动画的关键帧，这里我们使用两个关键帧来实现盒子的卷起和展开效果：

@keyframes slide-up {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slide-down {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

应用动画

最后，我们需要将动画应用到我们的盒子上：

#box {
  animation: slide-up 1s ease-in-out;
}

这个动画将持续 1 秒，并使用 ease-in-out 缓动函数，使动画更加流畅。

添加交互

现在，我们的盒子可以卷起和展开，但我们需要一个交互来触发这个动画。我们可以使用一个按钮：

<button onclick="toggleBox()">切换盒子</button>

function toggleBox() {
  var box = document.getElementById("box");
  if (box.style.display === "none") {
    box.style.display = "block";
    box.classList.add("slide-up");
  } else {
    box.classList.remove("slide-up");
    box.classList.add("slide-down");
    setTimeout(function () {
      box.style.display = "none";
    }, 1000);
  }
}