我有两个背景:
body {
background-image: url(img/nemo.png),url(img/ocean.png);
}
如何nemo.png background
从左右无限移动但不影响ocean.png background
?
编辑:当他到达最右边(并且图像不再可见)时,他将再次从左边出现并开始从左到右漂移。
我有两个背景:
body {
background-image: url(img/nemo.png),url(img/ocean.png);
}
如何nemo.png background
从左右无限移动但不影响ocean.png background
?
编辑:当他到达最右边(并且图像不再可见)时,他将再次从左边出现并开始从左到右漂移。
这可以使用纯 CSS 3 来完成,例如关键帧动画:
body {
background-image: url("http://www.animaatjes.nl/disney-plaatjes/disney-plaatjes/finding-nemo/nemo11.gif"), url("http://images2.layoutsparks.com/1/200022/ocean-dreams-blue-waves.jpg");
background-repeat: no-repeat;
background-position: 50% 0%, 0;
-moz-animation: swim 2s linear 0s infinite;
-webkit-animation: swim 2s linear 0s infinite;
animation: swim 2s linear 0s infinite;
}
@-moz-keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
@-webkit-keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
@keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
animation
: ;animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
-webkit-
该功能是实验性的,因此必须添加供应商前缀(例如)(另请参阅Can I use CSS3 Animation以获取兼容性说明)。在我的演示中,我使用了所有属性,除了最后一个。
这是一个选项:
从中创建一个动画 GIF,nemo.png
它是图像从左向右移动的简单动画。
ocean.png
然后通过设置为页面的背景来创建分层背景body
。
div
然后使用以下 css创建一个which:
width:100%;
height:100%;
background-position:center center;
background-image: url(img/moving-nemo.gif);
这div
将是您所有内容的包罗万象的容器,将为您提供分层的背景效果。
仅将海洋作为背景并创建一个以 nemo 作为背景的 div:
<div id="nemo"></div>
#nemo {
background: url(nemo.png) no-repeat;
width: 100px;
height: 100px;
position:absolute;
left: 0px;
top: 500px;
z-index:-10;
}
比你可以用 javascript (jQuery) 为这个 div 设置动画:
<script type="text/javascript">
$(document).ready(function() {
SwimRight();
});
//duration is in ms
function SwimRight() {
$('#nemo').css({positionLeft: 0});
$('#nemo').animate(
{ left: $(document).width() },
{ duration: 5000,
easing: normal,
queue: true,
complete: SwimRight}
);
</script>