TweenMax.js背景位移动画

最新推荐文章于 2022-08-02 08:26:40 发布

夏末_阳光依然耀眼

最新推荐文章于 2022-08-02 08:26:40 发布

阅读量976

点赞数

本文链接：https://blog.csdn.net/boyit0/article/details/79034402

版权

div+css 同时被 3 个专栏收录

89 篇文章 0 订阅

订阅专栏

javascript

40 篇文章 0 订阅

订阅专栏

jquery

39 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景动画</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
.fibers {
	display: block;
	width: 275px;
	height: 600px;
	background: url(images/spectra-wire-sprite.png) no-repeat 0 0 transparent;
}
</style>
</head>

<body>
<div class="fibers"></div>

<script src="images/TweenMax.js"></script> 
<script type="text/javascript">
	var st=0;
	TweenMax.set('.fibers',{ 
	repeat:-1, backgroundPosition: '0px 0px',ease:Linear.easeNone,onComplete: function (){    
    for (var y = 0; y < 5; y++) {
        for (var x = 0; x < 10; x++) {
            TweenMax.to('.fibers',0,{x:10,delay:st+=0.1,backgroundPosition: '-' + (275 * x) + 'px -' + (600 * y) + 'px',ease:Linear.easeNone,onStart: function () {
                
            }});
        }
    };
}})
	</script>
</body>
</html>