css动画图片替换 |纯css抖动效果代码

之所以能够通过CSS实现图片替换动画，是因为CSS提供了非常多的过渡效果和动画效果。其中，最为常用的就是transition和animation。transition可以用来实现简单的过渡效果，而animation可以用来实现复杂的动画效果。下面是一个使用transition和animation实现图片替换动画的例子：

<style>
.box {
width: 200px;
height: 200px;
background-image: url("1.jpg");
transition: all 1s ease;
animation: change 10s infinite;
}
@keyframes change {
0% {
background-image: url("1.jpg");
}
50% {
background-image: url("2.jpg");
}
100% {
background-image: url("3.jpg");
}
}
.box:hover {
transform: scale(1.2);
}
</style>
<div class="box"></div>

上面的代码中，通过将三张图片分别作为不同状态的背景图片，并使用animation来实现图片之间的过渡。同时，使用transition来实现鼠标悬浮时的缩放效果。这样，就可以实现一个非常炫酷的图片替换动画效果。

总之，CSS动画图片替换是一个非常有用的技巧，可以用来实现各种各样的炫酷效果。不过，在使用这种技巧时，也需要注意一些细节，例如图片大小的一致性、过渡效果的平滑性等等。