css3 颤动效果

CSS3是当前网页设计中广泛使用的一种技术，它为我们提供了丰富的动画效果，其中之一就是颤动效果。使用CSS3的animation属性可以轻松地实现颤动效果。

.shake {
    animation: shake 0.5s infinite alternate;
}
@keyframes shake {
from {
    transform: translateX(-5px);
}
to {
    transform: translateX(5px);
}
}
    

首先，我们选定要实现颤动效果的HTML元素，如下方例子中的一个div，给它添加一个类名shake。在CSS中，我们设置shake类的animation为shake动画，动画时间为0.5s，无限循环，交替方向。

接着，我们使用@keyframes关键字定义动画细节，其中包含from（初始状态）和to（结束状态）两个关键帧。在这个例子中，我们通过transform属性向左偏移5个像素（translateX(-5px)），再向右偏移5个像素（translateX(5px)）。这样就可以实现颤动效果了。

总之，CSS3的动画效果是我们网页设计的重要工具，颤动效果只是其中之一，它可以为我们的页面增添活力和趣味，让页面更加吸引人。

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