[分享]css3文字抖动

CSS3文字抖动是一种很有趣的效果，可以增加网站的趣味性，如果大家对CSS3文字抖动感兴趣的话，那么可以通过以下代码实现文本抖动。 h1 { animation: shake 0.82s cubicb...

CSS3文字抖动是一种很有趣的效果，可以增加网站的趣味性，如果大家对CSS3文字抖动感兴趣的话，那么可以通过以下代码实现文本抖动。

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

@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);
  }
} 

这段代码将CSS3属性应用在h1元素上，看起来非常简单。将文本抖动设置为一个'动画'，并将其应用在元素上。

CSS3文字抖动是一种简单但有趣的效果。大家可以使用上面的代码实现它，或者通过其他在线工具来创建自己的CSS3文字抖动效果。