多重背景CSS图片一直运动的图片

作者: 小狐仙Bobi
来源: 51数据库
2022-08-15

			.animate-area	{ 
			background-image: url(image/twitter-logo-bird.png), url(image/treehouseFrog.png), url(image/bg-clouds.png);
			background-position: 20px -90px, 30px 80px, 0px 0px;
			background-repeat: no-repeat, no-repeat, repeat-x;
		}
		@keyframes animatedBird {
			from { background-position: 20px 20px, 30px 80px, 0 0; }
			to { background-position: 300px -90px, 30px 20px, 100% 0; }
		}
		
		.animate-area	{ 
			animation: animatedBird 6s linear infinite;
		}
		.animate-area2 {
		    width: 560px;
		    height: 190px;
		 	background-image: url(image/twitter-logo-bird.png), url(image/treehouseFrog.png), url(image/bg-clouds.png);
		    background-position: 20px -90px, 30px 80px, 0px 0px;
		    background-repeat: no-repeat, no-repeat, repeat-x;
		    animation: 4s linear 0s normal none infinite running animatedBird;
		    overflow: hidden;
		}

推荐阅读