[分享]css3多张图片动画

CSS3的出现极大地促进了Web前端技术的发展，其中就包括动画效果的实现。通过CSS3，我们可以很方便地实现多张图片的动画效果，下面就分享一种实现方式。/ HTML代码 / / CSS代码 ...

CSS3的出现极大地促进了Web前端技术的发展，其中就包括动画效果的实现。通过CSS3，我们可以很方便地实现多张图片的动画效果，下面就分享一种实现方式。

/* HTML代码 */
<div class="animation">
	<img src="img1.jpg">
	<img src="img2.jpg">
	<img src="img3.jpg">
</div>

/* CSS代码 */
.animation {
	position: relative;
	width: 500px;
	height: 500px;
	overflow: hidden;
}
.animation img {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
} 

在HTML中，我们需要包含多张图片的容器，这里使用一个div来承载图片。在CSS中，我们需要设置这个容器的宽高，并将其overflow设置为hidden，这样就可以隐藏超出容器范围的图片了。针对每一张图片的样式，我们使用了绝对定位，将它们都定位在容器的左上角，并且使用了display:none来隐藏所有图片。

接下来，我们就可以开始编写动画效果的关键代码：

/* CSS代码 */
.animation img:first-child {
	display: block;
	animation: img_animation 10s infinite;
	-webkit-animation: img_animation 10s infinite;
}
@keyframes img_animation {
	0% { opacity: 0; }
	25% { opacity: 1; }
	50% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 0; }
}
@-webkit-keyframes img_animation {
	0% { opacity: 0; }
	25% { opacity: 1; }
	50% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 0; }
} 

这里我们使用了CSS3的关键帧动画，所以我们需要分别为所有网页浏览器编写动画效果相关的前缀。为了让第一张图片显示在页面上，我们将其display属性设置为block。animation属性和-webkit-animation属性分别指定动画名称、持续时间和动画次数。通过@keyframes和@-webkit-keyframes定义了动画的每个阶段，我们设置了图片的透明度，使得图片显示一段时间后逐渐消失。

至此，一种简单的实现多张图片动画效果的方法就完成了。当然，实现效果不局限于这样一种方式，还可以通过其他技术实现，具体实现方式可以根据实际需求选择，让我们一起探索CSS3的奥妙吧！