颤动文本样式粗体

有时，我们需要在文本中突出某一部分内容，让其更加醒目。此时，我们可以通过加粗的方式实现它。然而，对于需要突出的内容更多的情况，单纯的加粗可能并不能满足我们的需求。颤动文本样式粗体是一个比较有趣的文本样式，它可以让文本以颤动的方式显示，并且加粗。

实现方式

在 HTML 中，可以使用 text-shadow 属性来实现颤动文本样式。该属性可以设置文本阴影，其中，横向偏移量和纵向偏移量可以设置为随机的负数或正数，以实现颤动的效果。

在 CSS 中，可以通过如下代码实现：

@keyframes shake {
  0% {
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9,
                 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
                 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1),
                 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3),
                 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25),
                 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
  }
  100% {
    text-shadow: 0 1px 0 #bbb, 0 2px 0 #c9c9c9,
                 0 3px 0 #ccc, 0 4px 0 #c9c9c9,
                 0 5px 0 #bbb, 0 6px 1px rgba(0,0,0,.1),
                 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3),
                 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25),
                 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
  }
}

.shake-text {
  animation: shake 0.5s infinite linear;
  font-weight: bold;
}

其中，@keyframes 定义了一个动画，用来实现文本颤动的效果。.shake-text 是一个类选择器，用来应用该样式。在 HTML 中，只需将需要颤动和加粗的文本包裹在该类选择器中即可：

<p><span class="shake-text">这是需要颤动和加粗的文本。</span></p>

演示效果

这是需要颤动和加粗的文本。

结语

颤动文本样式粗体虽然比较有趣，但并不适合在所有场合使用。该样式在一些特定的情况下，比如需要强调某些特定的内容，在增加一些趣味性方面可以发挥很好的作用。但是，过度使用该样式会影响用户的阅读体验，因此需要慎重使用。