点击颤动的文本

如果你曾经见过一段颤动的文本，你会发现它能够吸引人的注意力，甚至让人感到一些不适。在这篇文章中，我将会介绍几种实现点击颤动文本的方法。

1. 使用CSS关键帧动画

.shake:hover {
  animation: shake 0.5s;
}

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

上面是一段使用CSS关键帧动画实现的代码片段。当鼠标悬停在.shake类的元素上时，它就会开始颤动。这个效果是通过在CSS中定义一个关键帧动画来完成的，其中每个关键帧都表示元素的一个不同状态。

2. 使用JavaScript的setInterval方法

<div id="shake" onclick="startShaking()">点击我颤动</div>

<script>
function startShaking() {
  var element = document.getElementById("shake");

  var interval = setInterval(function() {
    var x = Math.floor(Math.random() * 5) - 2;
    var y = Math.floor(Math.random() * 5) - 2;
    element.style.transform = "translate(" + x + "px, " + y + "px)";
  }, 25);

  setTimeout(function() {
    clearInterval(interval);
    element.style.transform = "translate(0, 0)";
  }, 1000);
}
</script>

上述代码使用了JavaScript的setInterval方法实现了一个颤动的效果。当元素被点击后，它将会开始随机地在水平和垂直方向上移动，这是通过计算一个随机数来实现的。在一定的时间后，它会停止颤动并回到原来的位置。

3. 使用jQuery插件

<div class="shake" onclick="$(this).shake()">点击我颤动</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$.fn.shake = function() {
  var element = $(this);
  var distance = "10px";
  var speed = 75;
  var times = 4;

  element.effect("shake", {
    distance: distance,
    times: times
  }, speed);
};
</script>

最后一个方法是使用jQuery插件实现颤动效果。这需要先引入jQuery和jQuery UI库。一旦元素被点击，就会调用.shake()方法并使用effect()函数来实现颤动。这个效果是通过改变元素的位置来实现的，在一定的时间内，元素将被震动多次。