css3 文字 抖动 效果

CSS3 文字 抖动 效果是一个非常有趣的动态效果，可以让文字看起来生动活泼，增加网页的视觉效果。下面我们来学习一下如何实现这种效果。

.shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
@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);
}
}
    

代码中的 ".shake" 表示我们要抖动的文字的类名，在 keyframes 中定义了不同的 transform 属性来实现抖动的效果。通过改变 translate3d 属性的值实现抖动的幅度和方向不同。接下来我们只需要在需要抖动的文字元素上添加这个类名即可。

值得注意的是，如果需要让抖动的效果更自然，建议同时设置 perspective 属性和 backface-visibility 属性，这样可以让文字看起来更加真实，不会出现一些奇怪的视觉效果。

通过上述方法，我们可以轻松地给网页添加生动、活泼的文字抖动效果，让你的网页更加具有吸引力。

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