css怎么制作抖音文字

抖音的字体震动效果非常抢眼，让视频更加生动有趣，那么我们该如何用CSS来制作这种震动的效果呢？

.text {
      position: relative;
      display: inline-block;
      animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
      transform: translate3d(0, 0, 0);
}
@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);
  }
}
    

首先，我们给文本设置一个position属性，并将它设置为inline-block。然后使用CSS动画来实现字体的震动效果，我们要定义一个关键帧动画 shake，并给它设置一些位置偏移的值，使得文本在x轴方向上产生抖动的效果。最后，我们使用transform属性来生成3D效果，使得抖动更为逼真。

p>
    你会像我一样span class="text">
    喜>
    欢/span>
    吗？/p>
    

最后，将以上代码嵌入到html中，给需要进行抖动效果的文字元素添加class属性为text即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！