css3 animation 背景图滚动效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用css3制作背景图片平滑滚动效果

主要css代码：

<style>
.banner {
    background-image: url(../images/banner.jpg);
    background-repeat: repeat-x;
    animation: slideleft 20000s infinite linear;
    -webkit-animation: slideleft 20000s infinite linear;
    background-size: cover; 
    background-attachment: fixed;
    position: relative;
    height:800px;
}
@keyframes slideleft {
    from {
        background-position: 0%;
    }

    to {
        background-position: 90000%;
    }
}

@-webkit-keyframes slideleft {
    from {
        background-position: 0%;
    }

    to {
        background-position: 90000%;
    }
}
</style>