html - CSS幻灯片，切换图片时，2张图片有一部分出现重叠。-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html - CSS幻灯片，切换图片时，2张图片有一部分出现重叠。

迷茫 2017-04-17 11:52:20

[HTML讨论组]

633

HTML

<p class = "middle">
    <p class="slide" id="slide_1"></p>
    <p class="slide" id="slide_2"></p>
</p>

CSS

.middle{
    width: 100%;
    min-height: 100%;
}

.slide{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    -webkit-animation: slide 10s linear infinite 0s;
}

#slide_1.slide{
    background: url(http://img14.poco.cn/mypoco/myphoto/20130216/12/64413070201302161217254259868514155_005.jpg) no-repeat center center;
}

#slide_2.slide{
    background: url(http://www.fansimg.com/album/uploads2012/10/userid368748time20121018140423.jpg) no-repeat center center;
    -webkit-animation-delay: 5s;
    -webkit-transform: translatex(100%);
}

@-webkit-keyframes slide{
    0%{
        -webkit-transform: translatex(100%);
    }
    10%{
        -webkit-transform: translatex(0%);
    }
    50%{
        -webkit-transform: translatex(0%);
    }
    60%{
        -webkit-transform: translatex(-100%);
    }
    100%{
        -webkit-transform: translatex(-100%);
    }
}