CSS实现背景图片的左右晃动

最新推荐文章于 2024-06-11 22:32:41 发布

feixuehan5200

最新推荐文章于 2024-06-11 22:32:41 发布

阅读量8.6k

点赞数 1

分类专栏： CSS 文章标签： CSS 背景图片左右晃动 animation

本文链接：https://blog.csdn.net/qq_15124555/article/details/52742488

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>aaa</title>
</head>
<style>
.div1{
	height:300px;
	background-image: url(TYPanorama.jpg);
	background-position: 0px 0px;
	background-repeat: repeat-x;
	animation: animatedBackground 10s linear infinite;
	-moz-animation: animatedBackground 10s linear infinite;
	-o-animation: animatedBackground 10s linear infinite;
}

@-webkit-keyframes animatedBackground {
	0% { background-position: 0 0; }
	12% { background-position: 60% 0; }
	25% { background-position: 120% 0; }
	38% { background-position: 60% 0; }
	50% {background-position: 0 0; }
	62% {background-position: -60% 0; }
	75% {background-position: -120% 0; }
	88% {background-position: -60% 0; }
	100% {background-position: 0 0; }
}
@-moz-keyframes animatedBackground {
	0% { background-position: 0 0; }
	12% { background-position: 60% 0; }
	25% { background-position: 120% 0; }
	38% { background-position: 60% 0; }
	50% {background-position: 0 0; }
	62% {background-position: -60% 0; }
	75% {background-position: -120% 0; }
	88% {background-position: -60% 0; }
	100% {background-position: 0 0; }
}
@-o-keyframes animatedBackground {
	0% { background-position: 0 0; }
	12% { background-position: 60% 0; }
	25% { background-position: 120% 0; }
	38% { background-position: 60% 0; }
	50% {background-position: 0 0; }
	62% {background-position: -60% 0; }
	75% {background-position: -120% 0; }
	88% {background-position: -60% 0; }
	100% {background-position: 0 0; }
}
@keyframes animatedBackground {
	0% { background-position: 0 0; }
	12% { background-position: 60% 0; }
	25% { background-position: 120% 0; }
	38% { background-position: 60% 0; }
	50% {background-position: 0 0; }
	62% {background-position: -60% 0; }
	75% {background-position: -120% 0; }
	88% {background-position: -60% 0; }
	100% {background-position: 0 0; }
}
</style>
<body>
<div class="div1"></div>
</body>
</html>

效果图：