文本换行颤振

在日常编写文本时，我们经常会遇到文字太长，无法适应页面宽度的问题。而且，有时候换行过于平淡，需要一些特殊效果来增加美感。这时候，文本换行颤振便派上用场了。

什么是文本换行颤振

文本换行颤振是一种特殊的文本显示方式。它将长文本分割成多行，然后在每行的结尾添加少量空格或其他间隔字符。这样，当用户滑动页面浏览文本时，文本似乎在微微颤动，产生一种独特的视觉效果。

为什么要使用文本换行颤振

一方面，文本换行颤振可以让长文本更加美观、易读；另一方面，它还可以缩短文本在屏幕上的显示长度，减少滚动次数，提高用户的体验。

如何实现文本颤振

HTML实现

<style>
  .shaky { 
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97)  both; 
    display: inline-block;
  }
  @keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
  }
</style>
<p><span class="shaky">文本换行颤振</span></p>

CSS实现

.shaky {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  display: inline-block;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

结论

文本换行颤振是一种简单而有效的文本显示方式，可以使文本更加美观、易读。使用该方法，可以提高用户的体验。为了实现这种效果，我们可以使用HTML和CSS来编写代码，实现文本颤振的效果。