[分享]css3动画特效按钮抖动提示

CSS3动画特效按钮抖动提示，在现代网页设计中是非常常见的一种交互效果。这种效果可以让网站更加动感和生动，吸引用户的注意力。.button{ :relative; display:inlinebloc...

CSS3动画特效按钮抖动提示，在现代网页设计中是非常常见的一种交互效果。这种效果可以让网站更加动感和生动，吸引用户的注意力。

.button{
    position:relative;
    display:inline-block;
    padding: 15px 25px;
    background-color:#333;
    color:#fff;
    font-size:16px;
    border-radius:5px;
    cursor:pointer;
}
.button:active{
    top:2px;
}
.button:hover{
    animation:shake 0.5s;
}
 
@keyframes shake{
    0% {
        transform:translate(0);
    }
    10% {
        transform:translate(-3px, 3px);
    }
    20% {
        transform:translate(3px, -3px);
    }
    30% {
        transform:translate(-3px, -3px);
    }
    40% {
        transform:translate(3px, 3px);
    }
    50% {
        transform:translate(-3px, 3px);
    }
    60% {
        transform:translate(3px, -3px);
    }
    70% {
        transform:translate(-3px, -3px);
    }
    80% {
        transform:translate(3px, 3px);
    }
    90% {
        transform:translate(-3px, 3px);
    }
    100% {
        transform:translate(0);
    }
} 

以上是一个简单的抖动效果的CSS代码。我们可以根据实际情况对其进行调整和修改，从而达到更好的效果。我们可以看到，该代码定义的按钮样式基本符合常规的按钮要求，包括背景色、字体颜色、圆角等。当我们给该按钮添加:hover伪类时，就可以让其在鼠标悬停时触发抖动动画。该动画定义了只要不同的动画关键帧，分别设置不同的位移量，从而达到抖动的效果。