我正在尝试为背景图像设置动画,以便图像从右到左显示。
我使用的图像的宽度大于背景所在的 div 容器。启动时,背景如下
background: url(../img/zeppelin.png);
background-repeat: no-repeat;
background-position: right;
但是当页面加载时,我希望背景是动画的,以便它位于左侧。这应该采取例如。 2 秒且只应进行一次。 (图像应位于其后左侧)。
我不想使用任何鼠标事件或伪类。有没有办法只使用 CSS 来制作动画?我尝试寻找关键帧的解决方案但没有成功。
你可以尝试使用this tutorial
: CSS 背景动画 http://bradsknutson.com/blog/css-background-animation/
@keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
@-moz-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
@-webkit-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
@-ms-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
@-o-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
html {
width: 100%;
height: 100%;
background-image: url(background.png);
background-position: 0px 0px;
animation: animatedBackground 10s linear infinite;
-moz-animation: animatedBackground 10s linear infinite;
-webkit-animation: animatedBackground 10s linear infinite;
-ms-animation: animatedBackground 10s linear infinite;
-o-animation: animatedBackground 10s linear infinite;
}
示例在这里: http://jsfiddle.net/verber/6rAGT/5/ http://jsfiddle.net/verber/6rAGT/5/
希望是您所需要的)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)