CSS实现TikTok文字抖动效果示例

前端 同学 在日常开发中精彩会因为一些动效和设计争的面红耳赤，设计希望用代码实现，前端要设计出gif图，最后谁也不让谁，设计走了，留下了前端独自加班 .. ....

CSS技 术 是前端必须掌握的一项技能，不仅要掌握，而且要精通。现在 前端框架 横行的趋势，程序员写样式的 机会 也越来越少，组件式开发，一个页面几乎 不用 写一行css代码。即使不写，但是背后的原理一定要弄明白。

从网页性能的角度，能用css实现的动画绝不用js，能用js实现的动画绝不用gif，在执行动画的时候css可以调用机器的GPU去执行，性能自然比js有优势得多。以上TikTok的文字抖动，可用css animation动画实现，通过变换文字的阴影 方向 ，设置循环的动画帧的模糊的效果。 知道 原理就会 简单 的多。不妨平时多去揣摩揣摩。

效果图如下：

附上代码

body {
  m arg in: 0;
  padding: 0;
  dis play : flex;
  justify-content:  center ;
  align -i tems: center;
  min-h ei ght: 100vh;
  background:  # 000;
}
h2 {
  color: #fff;
  font-f ami ly: sans -s erif;
  font- Size:  4em;
  animation: ani MATE  0.5s linear infin IT e;
}

@keyfr am es animate {
  0%, 100% {
    text-shadow: -1.5px -1.5px 0 #0ff, 1.5px 1.5px 0 #f00;
  }
  25% {
    text-shadow: 1.5px 1.5px 0 #0ff, -1.5px -1.5px 0 #f00;
  }
  50% {
    text-shadow: 1.5px -1.5px 0 #0ff, 1.5px -1.5px 0 #f00;
  }
  75% {
    text-shadow: -1.5px 1.5px 0 #0ff, -1.5px 1.5px 0 #f00;
  }
}

到此这篇关于CSS实现TikTok文字抖动效果示例的 文章 就介绍到这了,更多相关CSS文字抖动内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 CSS实现TikTok文字抖动效果示例 全部内容，希望文章能够帮你解决 CSS实现TikTok文字抖动效果示例 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS实现TikTok文字抖动效果示例的详细内容...