css3无限抖动

CSS3是前端开发中重要的技术之一，它可以为网页增加各种惊艳的效果，其中无限抖动是一种常见的动画效果。

无限抖动可以通过CSS3中的关键帧动画来实现，首先需要定义抖动的关键帧：

@keyframes shake {
0% {
    transform: translate(0, 0);
}
20% {
    transform: translate(-10px, 0);
}
30% {
    transform: translate(10px, 0);
}
50% {
    transform: translate(-10px, 0);
}
60% {
    transform: translate(10px, 0);
}
100% {
    transform: translate(0, 0);
}
}

上述代码中，我们定义了一个关键帧动画shake，包含6个关键帧，每个关键帧的transform样式有所不同，实现了左右抖动的效果。

接下来，我们将该关键帧应用到需要抖动的元素上：

.shake {
    animation: shake 1s infinite;
}
    

这段代码指定了引用的关键帧动画为shake，持续时间为1秒，无限循环。

最后，只需要在需要抖动的元素上加上类名shake即可实现无限抖动的效果。

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