在网页设计中,图片的运用往往是非常重要的。而如果能够通过CSS3实现一些有趣的图片样式,那么就更能吸引访客的目光了。本文介绍如何使用CSS3实现图片抖动样式。
img { display: inline-block; animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both infinite; transform: translate3d(0,0); } @keyframes shake { 10%,90% { transform: translate3d(-1px,0); } 20%,80% { transform: translate3d(2px,0); } 30%,50%,70% { transform: translate3d(-4px,0); } 40%,60% { transform: translate3d(4px,0); } }
代码中,我们首先将要抖动的图片设置为“display: inline-block;”以使得图片能够应用动画。接着我们使用keyframes创建名为“shake”的动画,这个动画定义了图片在不同时间点的旋转状态,以实现抖动的效果。
在img标签中我们应用了animation属性,设置动画名称为“shake”,时长为0.82秒,缓动函数为cubic-bezier(.36,.97),这是一个贝塞尔曲线方程,可以调整动画的速度。同时我们将动画效果应用于图片的“transform”属性,这意味着图片的位置或大小将在动画过程中发生变化。