我正在尝试为图像制作动画(使用 class="under")并与静止图像(使用 class="over")重叠。动画效果在 Firefox 和 IE-9 浏览器下的下图效果很好,而 Chrome 不显示动画。 Chrome 显示两个静止图像。 请任何解决方案。
.under
{
border-style: solid;
border-color: #0000ff;
border-radius:15px;
position: absolute;
left:173px;
top:0px;
z-index: 1;
}
.over
{
position:relative;
left:100px;
top:20px;
z-index: 2;
border-radius: 15px;
}
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
#animate-area {
width: 1000px;
height: 160px;
background-image: url(images/img7.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
}
谢谢 阿南德
最佳答案
试试@-webkit-keyframes animatedBackground
@-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
关于html - 图像重叠和动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27087046/