[分享]css3摇晃抖动效果

CSS3是网页设计中必不可少的一部分，其中各种动画效果更是网页设计中的一大亮点。今天，我们就来介绍一下CSS3中的抖动效果，让我们的网页更具生动性。 .shake{ animation: shake ...

CSS3是网页设计中必不可少的一部分，其中各种动画效果更是网页设计中的一大亮点。今天，我们就来介绍一下CSS3中的抖动效果，让我们的网页更具生动性。

 .shake{
        animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
    }
    
    @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"类，并在其animation属性中引入了一个抖动效果的关键帧"shake"。在这个关键帧中，我们在不同的时间段内设置了不同的位移，从而形成抖动的效果。通过修改不同的关键帧设置，我们还可以实现不同的抖动效果。

所以，只需要加上这个"shake"类到需要抖动的元素上，就可以实现动态的抖动效果了。比如：

 <div class="shake">Hello, world!</div> 

通过这种方式，我们就可以让我们的网页更加有趣和生动了。