如何使文本扩展颤动

有时候我们需要使文本有一些动态效果，让人眼花缭乱，比如让文本颤动，下面介绍两种方法。

方法一：使用CSS

@keyframes shake {
  0% {transform: translate(5px, 5px) rotate(0deg);}
  10% {transform: translate(-5px, -5px) rotate(-5deg);}
  20% {transform: translate(-5px, 0px) rotate(5deg);}
  30% {transform: translate(0px, 5px) rotate(0deg);}
  40% {transform: translate(5px, -5px) rotate(5deg);}
  50% {transform: translate(-5px, 5px) rotate(-5deg);}
  60% {transform: translate(-5px, -5px) rotate(0deg);}
  70% {transform: translate(0px, 5px) rotate(5deg);}
  80% {transform: translate(5px, -5px) rotate(-5deg);}
  90% {transform: translate(5px, 5px) rotate(0deg);}
  100% {transform: translate(-5px, -5px) rotate(-5deg);}
}

.shake {
  animation: shake 0.5s infinite;
}

这是一个CSS样式，通过给文本添加这个样式，可以让文本扩展颤动。使用方法：

<div class="shake">颤动的文本</div>

效果如下所示：

方法二：使用JavaScript

(function () {
  var vibrating = false;
  var vibrationInterval;

  function vibrate() {
    if (!vibrating) {
      vibrating = true;
      var divs = document.getElementsByTagName('div');
      var len = divs.length;
      var count = 0;

      vibrationInterval = setInterval(function () {
        for (var i = 0; i < len; i++) {
          divs[i].style.marginLeft = (Math.random() * 10 - 5) + 'px';
          divs[i].style.marginTop = (Math.random() * 10 - 5) + 'px';
        }
        count++;

        if (count >= 15) {
          clearInterval(vibrationInterval);
          for (var i = 0; i < len; i++) {
            divs[i].style.marginLeft = '';
            divs[i].style.marginTop = '';
          }
          vibrating = false;
        }
      }, 50);
    }
  }

  // 给需要颤动的文本添加点击事件
  var shakeDivs = document.getElementsByClassName('shake');
  var len = shakeDivs.length;
  for (var i = 0; i < len; i++) {
    shakeDivs[i].onclick = vibrate;
  }
})();

这是一个JavaScript代码片段，通过给需要颤动的文本添加点击事件，触发JavaScript函数，可以让文本扩展颤动。使用方法：

<div class="shake">颤动的文本</div>

效果如下所示：

以上两种方法都能让文本扩展颤动，选择哪种方法取决于实际情况和自己所熟悉的技术。