js+css讓背景圖片動起來
阿新 • • 發佈：2017-11-09
margin mage fun width col type images doc anim
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css+js讓背景圖片動起來</title>
<style>
*{
margin:0;
padding:0;
}
#section{
width: 800px;
height: 300px;
margin:0 auto;
background:url("images/timg_11.jpg");
background-position-x: 0px;
background-position-y: 0px;
background-repeat: repeat;
background-size:400px 300px;
}
.cover{
width: 100%;
height: 100%;
background:rgba(0,0,0,0.5);
position: relative;
}
.cover>h1{
color: #fff;
position:absolute;
top:183.5px;
left:314.5px;
}
</style>
</head>
<body>
<section id="section">
<div class="cover">
<h1>WELL IS DONE</h1>
</div>
</section>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
var section = $(‘#section‘);
var x =0;
function polling() {
x += 5;
section.animate({
‘background-position-x‘: x+‘%‘,
}, 400, ‘linear‘);
setTimeout(polling,300)
}
polling();
</script>
</body>
</html>
js+css讓背景圖片動起來