CSS幻灯片,切换图片时,2张图片有一部分出现重叠。-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

2016-06-17 15:26:20 1903 1

HTML

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

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%);
    }
}
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:42:53

    会不会你的图片大小不一样,因为我按照你的方法试了一下并没有重合演示

    0 0
相关问答

1

回答

怎么在css里面导入图片

2018-05-10 20:05:47 1612浏览量 回答数 1

1

回答

JS/CSS 选项卡 – 幻灯片效果

2020-02-13 19:02:25 606浏览量 回答数 1

2

回答

JS/CSS 选项卡 – 垂直方向

2020-02-13 19:06:11 748浏览量 回答数 2

2

回答

JS/CSS 选项卡 – 设置关闭按钮

2020-02-13 19:10:52 770浏览量 回答数 2

2

回答

JS/CSS 选项卡 – 设置默认选项

2020-02-13 19:17:47 841浏览量 回答数 2

1

回答

JS/CSS 各种操作信息提示效果

2020-02-13 16:37:08 651浏览量 回答数 1

1

回答

JS/CSS 登录表单

2020-02-13 16:43:12 568浏览量 回答数 1

1

回答

JS/CSS 注册表单

2020-02-13 16:46:15 580浏览量 回答数 1

2

回答

JS/CSS 菜单按钮切换(打开/关闭)

2020-02-13 16:50:10 797浏览量 回答数 2

2

回答

JS/CSS 手风琴动画效果

2020-02-13 16:52:19 983浏览量 回答数 2
+关注
杨冬芳
IT从业
文章
问答
问答排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
Java开发手册-孤尽秘传版
立即下载
低代码开发师(初级)实战教程
立即下载