css3抖动效果布局 |css滑动登录

/* 首先创建一个 id 为 shake 的 CSS 类 */
#shake {
display: inline-block;
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);
}
}

上面是一个实现抖动效果的 CSS 代码，其中通过创建一个名为 “shake” 类来实现抖动效果。在动画的实现中，通过使用关键帧动画来实现抖动效果的具体细节。这段代码可以通过添加到要实现抖动效果的元素上去达到抖动效果的效果。效果如下所示：

<div id="shake">这是一个抖动效果</div>

上面的代码可以让 “这是一个抖动效果” 文字实现抖动效果。大家可以通过对 CSS3 抖动效果布局的进一步探索，来实现更加生动、有趣的网页设计。