CSS实现背景图片的左右晃动_keyframes 设置背景层晃动

作者：繁依Fanyi0 | 2024-06-30 04:11:17

踩

keyframes 设置背景层晃动


<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>

效果图：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/771341