<!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让背景图片动起来
原文地址:http://www.cnblogs.com/yingleiming/p/7810772.html