通过css将多张图片绘制成帧动画

通过css将多张图片绘制成帧动画

使用关键：@keyframes、animation

1.定义一个容器

<div class="img-box"></div>

这个容器用于放置背景图片

2.编写css

@keyframes gif {
	0% {
		background-image: url('图片路径');
	}
	25% {
		background-image: url('图片路径');
	}
	50% {
		background-image: url('图片路径');
	}
	75% {
		background-image: url('图片路径');
	}
	100% {
		background-image: url('图片路径');
	}
}

.img-box {
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	animation: gif 5s infinite;
}