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”动画应用到需要抖动的单元块上,就可以实现单元块的抖动效果,非常酷炫!