颤振如何将按钮飞溅效果添加到列 (1)

📌 相关文章

📜 颤振如何将按钮飞溅效果添加到列 (1)

📅 最后修改于: 2023-12-03 15:28:57.072000 🧑 作者: Mango

如何将按钮飞溅效果添加到列

在网页设计中，有时候我们需要为一些元素添加一些动态的效果，以增强用户的交互体验。本文将介绍如何将按钮飞溅效果添加到列中。

示例效果

先看一下我们最终要实现的效果：

按钮飞溅效果

实现步骤

我们将分为以下几个步骤来实现：

添加样式
添加 HTML 结构
使用 JavaScript 动态修改样式

添加样式

我们在 CSS 中添加以下样式：

.column {
  position: relative;
  background-color: #f2f2f2;
  padding: 20px;
  overflow: hidden;
}

.column:hover .column__button {
  animation: button-fly 0.4s ease forwards;
}

@keyframes button-fly {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-150%);
    opacity: 0;
  }
}

.column__button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: #0077cc;
  color: #fff;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.column__button:hover {
  transform: translateY(-5px);
}

.column__button:active {
  transform: translateY(2px);
  transition: transform 0.1s;
}

这里主要是为 .column 元素和 .column__button 元素添加了一些样式：

.column 元素添加了 position: relative，以实现绝对定位在其内部的 .column__button 元素；
.column:hover .column__button 用于在 .column 元素悬停状态下添加 button-fly 动画；
@keyframes button-fly 定义了 button-fly 动画，用于使 .column__button 元素实现飞溅效果；
.column__button 元素添加了绝对定位、背景颜色、字体颜色、边距、字体大小、圆角等样式；
.column__button:hover 和 .column__button:active 用于添加鼠标悬停和点击效果。

添加 HTML 结构

接下来我们添加一个 .column 元素，其中包含一个 .column__button 元素：

<div class="column">
  <h2>这是一个标题</h2>
  <p>这是一段文字内容。</p>
  <div class="column__button">阅读更多</div>
</div>

这里我们使用 .column 元素包含了一个标题和一段文字内容，.column__button 元素用于实现按钮飞溅效果。

使用 JavaScript 动态修改样式

使用 JavaScript，可以动态改变 .column__button元素的样式。我们添加以下代码：

const buttons = document.querySelectorAll('.column__button');

buttons.forEach(button => {
  const column = button.closest('.column');
  button.style.width = `${column.offsetWidth}px`;
});

这里我们先通过 document.querySelectorAll('.column__button') 找到所有的 .column__button 元素并存放到 buttons 变量中。然后通过 .forEach() 遍历每个 .column__button 元素：

使用 button.closest('.column') 找到其最近的 .column 祖先元素，并将其存放到 column 变量中；
然后将 button 元素的 width 样式设置为 column.offsetWidth，以使其在 .column 元素的宽度范围内。

到此，我们就完成了按钮飞溅效果添加到列的实现。

完整代码

<!DOCTYPE html>
<html>
  <head>
    <title>按钮飞溅效果添加到列</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .column {
        position: relative;
        background-color: #f2f2f2;
        padding: 20px;
        overflow: hidden;
      }

      .column:hover .column__button {
        animation: button-fly 0.4s ease forwards;
      }

      @keyframes button-fly {
        from {
          transform: translateY(0);
          opacity: 1;
        }
        to {
          transform: translateY(-150%);
          opacity: 0;
        }
      }

      .column__button {
        position: absolute;
        right: 10px;
        bottom: 10px;
        background-color: #0077cc;
        color: #fff;
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 5px;
        cursor: pointer;
        transition: transform 0.3s ease;
      }

      .column__button:hover {
        transform: translateY(-5px);
      }

      .column__button:active {
        transform: translateY(2px);
        transition: transform 0.1s;
      }
    </style>
  </head>
  <body>
    <div class="column">
      <h2>这是一个标题</h2>
      <p>这是一段文字内容。</p>
      <div class="column__button">阅读更多</div>
    </div>

    <div class="column">
      <h2>这是另一个标题</h2>
      <p>这是另一段文字内容。</p>
      <div class="column__button">阅读更多</div>
    </div>

    <script>
      const buttons = document.querySelectorAll('.column__button');

      buttons.forEach(button => {
        const column = button.closest('.column');
        button.style.width = `${column.offsetWidth}px`;
      });
    </script>
  </body>
</html>

总结

本文介绍了如何将按钮飞溅效果添加到列中。通过 CSS 的动画和 JavaScript 的样式修改，我们可以轻松地实现这种效果。希望本文对你有所帮助。