提示文本颤动两行

在用户界面中，为了吸引用户的注意力，时常需要将某些文本提示进行一些视觉上的处理，让它们在页面中呼之欲出。其中一个方法就是让提示文本颤动。下面介绍如何实现这一功能。

实现思路

实现提示文本颤动的一般思路是利用JavaScript代码定时改变文本的样式，使其在页面上做出颤动效果。具体实现方法如下：

1. 给文本添加CSS样式，使其改变字体颜色、加粗等基本样式，让其在页面上更加醒目。

<style>
  .shake-text {
    font-weight: bold;
    font-size: 1.2em;
    color: red;
  }
</style>

2. 使用JavaScript代码改变文本的样式，使其在页面上进行颤动。首先需要获取文本的元素，然后定义一个定时器，每隔一段时间改变文本的样式一次，使其在页面上颤动。

<script>
  var shakeEl = document.querySelector('.shake-text');
  var timer = null;
  var count = 0;
  var shake = function() {
    if (count === 10) {
      clearInterval(timer);
      shakeEl.classList.remove('shake');
      return;
    }
    count ++;
    shakeEl.classList.toggle('shake');
  }
  timer = setInterval(shake, 100);
</script>

3. 最后定义CSS动画，使提示文本在页面上发生颤动。

<style>
  .shake {
    animation: shake .5s ease-in-out infinite alternate;
  }
  @keyframes shake {
    from { transform: translateX(-5px); }
    to { transform: translateX(5px); }
  }
</style>

实现效果

以上实现思路已经很完整，现在可以使用上述代码片段实现一个提示文本颤动两行的效果。

<div class="shake-text">请注意！</div>

<style>
  .shake-text {
    font-weight: bold;
    font-size: 1.2em;
    color: red;
  }

  .shake {
    animation: shake .5s ease-in-out infinite alternate;
  }

  @keyframes shake {
    from { transform: translateX(-5px); }
    to { transform: translateX(5px); }
  }
</style>

<script>
  var shakeEl = document.querySelector('.shake-text');
  var timer = null;
  var count = 0;
  var shake = function() {
    if (count === 10) {
      clearInterval(timer);
      shakeEl.classList.remove('shake');
      return;
    }
    count ++;
    shakeEl.classList.toggle('shake');
  }
  timer = setInterval(shake, 100);
</script>

总结

以上就是实现提示文本颤动两行的具体方法。通过JavaScript代码实现颤动效果，使用CSS动画控制文本颤动的形式。使用该方法可以给提示文本添加视觉效果，从而使其在页面上得到更好的展示。