淘先锋技术网

首页 1 2 3 4 5 6 7

CSS可以通过动画效果来实现单元块的抖动。在这篇文章中,我们将学习如何使用CSS实现单元块抖动的动画效果。

.shake {
animation: shake 0.82s 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”的CSS选择器,指定抖动的动画效果,并设置过渡时间为0.82s。属性“cubic-bezier”用来指定弹性曲线的参数,可以根据需要自行调整。

接下来,我们使用CSS的关键帧技术定义一个名为“shake”的动画。在每帧中,采用transform属性将元素在水平方向上移动,模拟单元块的抖动效果。

通过将“shake”动画应用到需要抖动的单元块上,就可以实现单元块的抖动效果,非常酷炫!