Question

HTML5：

        <div id="slideshow">
        <div id='animate-area'>
        </div>
        </div>

的CSS：

body {
        margin: 0;
        padding: 0;
    }
    #slideshow {
        position: relative;
        overflow: hidden;
        height: 145px;
    }
    #animate-area { 
        height: 100%;
        width: 2538px;
        position: absolute;
        left: 0;
        top: 0;
        background-image: url('../img/banner.png');
        animation: animatedBackground 40s 5s linear infinite;
        -ms-animation: animatedBackground 40s linear infinite;
        -moz-animation: animatedBackground 40s linear infinite;
        -webkit-animation: animatedBackground 30s linear infinite;
    }
    /* Put your css in here */
    @keyframes animatedBackground {
        from { left: 0; }
        to { left: -1269px; }
    }
    @-webkit-keyframes animatedBackground {
        from { left: 0; }
        to { left: -1269px; }
    }
    @-moz-keyframes animatedBackground {
        from { left: 0; }
        to { left: -1269px; }
    }

的jsfiddle：

jsfiddle.net/cz04c4nx/1

使用此图片，我需要显示，http://jsfiddle.net/5pVr4/6/。我尝试过，但是对于我在localhost中运行的特定图像url('../img/banner.png')，无法获取。

Answer 1

我想我解决了你的问题。您可以使用此代码，它可能会对您有所帮助。我编辑了您可以制作类似动画背景图像的代码。

CSS代码：

@-webkit-keyframes MOVE-BG {
from {
    -webkit-transform: translateX(0);
}
to { 
    -webkit-transform: translateX(-550px);
}
}

#content {
    height: 100px;
    text-align: center;
    font-size: 26px;
    color: white;   
    position: relative;
    overflow: hidden;
}

.bg{
    position: absolute;
    left: 0;
    right: -550px;
    top: 0;
    bottom: 0;
    background: url(http://s30.postimg.org/qnju89rkx/banner.png) 0% 0% repeat;
    z-index: -1;

    -webkit-animation-name: MOVE-BG;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

<强> Live Working Demo

CSS动画html5中的背景图像问题

1 个答案: