颤动复制到剪贴板 (1)

📌 相关文章

📜 颤动复制到剪贴板 (1)

📅 最后修改于: 2023-12-03 14:58:47.498000 🧑 作者: Mango

颤动复制到剪贴板

在许多应用程序中，复制文本内容到剪贴板是一项基本操作。然而，很少有应用程序使用动画效果来增加用户体验。因此，在本文中，我们将介绍如何使用CSS3动画效果在文本复制时添加颤动效果。

实现

HTML结构：

<button class="shaky-copy-btn" data-copy="Hello World!">复制到剪贴板</button>

其中，我们创建了一个按钮，使用 data-copy 属性来存储要复制的文本。

CSS3样式：

/* 颤动动画 */
@keyframes shaky-animation {
  10%, 90% {
    transform: translate(-1px, 1px) rotate(-1deg);
  }
  
  20%, 80% {
    transform: translate(2px, -2px) rotate(2deg);
  }
  
  30%, 50%, 70% {
    transform: translate(-4px, 4px) rotate(-4deg);
  }
  
  40%, 60% {
    transform: translate(4px, -4px) rotate(4deg);
  }
}

/* 按钮样式 */
.shaky-copy-btn {
  background-color: #4CAF50; 
  border: none;
  padding: 10px;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

/* 颤动效果 */
.shaky-copy-btn.shaking {
  animation: shaky-animation 0.5s linear;
}

在上面的样式中，我们定义了一个名为shaky-animation的 keyframes 动画，它包含四个不同的阶段，每个阶段包含不同的 transform 值和角度旋转值。接下来，我们定义了一个 shaky-copy-btn 按钮样式，包括背景色、边框样式、文字颜色等。最后，我们定义通过添加 shaking 类，触发动画效果。

JavaScript实现：

// 查找按钮
var copyBtn = document.querySelector('.shaky-copy-btn');

// 添加点击事件监听器
copyBtn.addEventListener('click', function(event) {
  // 获取要复制的文本
  var copyText = copyBtn.getAttribute('data-copy');

  // 创建一个暂存文本区域
  var tempElement = document.createElement('textarea');
  tempElement.value = copyText;
  tempElement.setAttribute('readonly', '');
  tempElement.style.position = 'absolute';
  tempElement.style.left = '-9999px';

  // 将暂存文本区域添加到页面
  document.body.appendChild(tempElement);

  // 选中暂存文本区域内容
  tempElement.select();

  // 执行复制命令
  document.execCommand('copy');

  // 从页面中删除暂存文本区域
  document.body.removeChild(tempElement);

  // 触发颤动效果
  copyBtn.classList.add('shaking');
  setTimeout(function() {
    copyBtn.classList.remove('shaking');
  }, 500);
});

JavaScript代码使用 querySelector 方法查找按钮，并添加了一个单击事件监听器，以调用复制命令复制文本内容到剪贴板。在这个过程中，我们创建了一个暂存文本区域，并将其添加到页面上，再将其删除以清除任何可能影响效果的东西。最后，我们在复制成功后启动颤动效果，触发CSS动画效果的类并在500ms后移除。

示例

一个完整的示例请参见下面的代码片段。

<!DOCTYPE html>
<html>
  <head>
    <title>Shaky Clipboard Copy Button</title>
    <style>
      /* 颤动动画 */
      @keyframes shaky-animation {
        10%, 90% {
          transform: translate(-1px, 1px) rotate(-1deg);
        }
        
        20%, 80% {
          transform: translate(2px, -2px) rotate(2deg);
        }
        
        30%, 50%, 70% {
          transform: translate(-4px, 4px) rotate(-4deg);
        }
        
        40%, 60% {
          transform: translate(4px, -4px) rotate(4deg);
        }
      }

      /* 按钮样式 */
      .shaky-copy-btn {
        background-color: #4CAF50; 
        border: none;
        padding: 10px;
        border-radius: 4px;
        color: white;
        font-size: 16px;
        cursor: pointer;
      }

      /* 颤动效果 */
      .shaky-copy-btn.shaking {
        animation: shaky-animation 0.5s linear;
      }
    </style>
  </head>
  <body>
    <button class="shaky-copy-btn" data-copy="Copy me!">复制到剪贴板</button>
    <script>
      // 查找按钮
      var copyBtn = document.querySelector('.shaky-copy-btn');

      // 添加点击事件监听器
      copyBtn.addEventListener('click', function(event) {
        // 获取要复制的文本
        var copyText = copyBtn.getAttribute('data-copy');

        // 创建一个暂存文本区域
        var tempElement = document.createElement('textarea');
        tempElement.value = copyText;
        tempElement.setAttribute('readonly', '');
        tempElement.style.position = 'absolute';
        tempElement.style.left = '-9999px';

        // 将暂存文本区域添加到页面
        document.body.appendChild(tempElement);

        // 选中暂存文本区域内容
        tempElement.select();

        // 执行复制命令
        document.execCommand('copy');

        // 从页面中删除暂存文本区域
        document.body.removeChild(tempElement);

        // 触发颤动效果
        copyBtn.classList.add('shaking');
        setTimeout(function() {
          copyBtn.classList.remove('shaking');
        }, 500);
      });
    </script>
  </body>
</html>

结论

以上是如何在复制文本内容到剪贴板时添加颤动动画效果的详细介绍。通过此技术，我们可以增强应用程序的用户体验，并让用户对复制操作更有信心。