使用简单的javascript和css3平滑地滑动背景位置
如何使背景图像平滑？请参见下面的我的尝试：使用简单的javascript和css3平滑地滑动背景位置,javascript,css,transition,Javascript,Css,Transition,如何使背景图像平滑？请参见下面的我的尝试： <!DOCTYPE html> <meta charset="utf-8"> <title>Slide backgroundPosition SMOTH</title> <style> #div1 { -webkit-transition:background-position 0.1s ease-in-out; -moz-transition:background-posit
<!DOCTYPE html>
<meta charset="utf-8">
<title>Slide backgroundPosition SMOTH</title>
<style>
#div1 {
-webkit-transition:background-position 0.1s ease-in-out;
-moz-transition:background-position 0.1s ease-in-out;
-o-transition:background-position 0.1s ease-in-out;
-ms-transition:background-position 0.1s ease-in-out;
transition:background-position 0.1s ease-in-out;
height:300px;
background:url("https://www.google.se/images/srpr/logo4w.png") 0 center repeat-x
}
</style>
<script>
window.onload = function(){
var div1 = document.getElementById('div1');
var position = 1;
function slideBackgroundPosition() {
div1.style.backgroundPosition = '-' + position + 'px';
position += 1;
}
setInterval(slideBackgroundPosition, 100);
};
</script>
<div id=div1></div>
幻灯片背景位置烟雾
#第一组{
-webkit转换：背景位置0.1s易入易出；
-moz转换：背景位置0.1s缓进缓出；
-o型转换：背景位置0.1s缓进缓出；
-ms转换：背景位置0.1s缓进缓出；
过渡：背景位置0.1s缓进缓出；
高度：300px；
背景：url（“https://www.google.se/images/srpr/logo4w.png）0中心重复-x
}
window.onload=函数（）{
var div1=document.getElementById（'div1'）；
var位置=1；
函数slideBackgroundPosition（）{
div1.style.backgroundPosition='-'+position+'px'；
位置+=1；
}
设置间隔（滑回地面位置，100）；
};
transitionsetInterval