JsFiddle
Code:
.iconsbg_container {
width: 100%;
-webkit-animation: iconsbg_container 10s linear infinite;
-moz-animation: iconsbg_container 10s linear infinite;
-ms-animation: iconsbg_container 10s linear infinite;
animation: iconsbg_container 10s linear infinite;
}
.EG_icons_a,
.EG_icons_b,
.EG_icons_c,
.iconsbg_container {
overflow: hidden;
}
.icons_container {
padding: 50px 0;
width: 50%;
max-width: 900px;
position: relative;
margin: 0 auto;
}
.EG_icons_a,
.EG_icons_b,
.EG_icons_c {
background-image: url('http://davidwillprice.com/wp-content/uploads/2018/03/Icons-sprite-sheet2.png');
background-size: auto 100%;
width: 100%;
}
.EG_icons_b,
.EG_icons_c {
height: 100%;
position: absolute;
}
.EG_icons_a {
position: relative;
margin: 0 auto;
padding-bottom: 75%;
}
.EG_icons_b {
-webkit-animation: EG_icons_b 10s linear infinite;
-moz-animation: EG_icons_b 10s linear infinite;
-ms-animation: EG_icons_b 10s linear infinite;
animation: EG_icons_b 10s linear infinite;
background-position: 50% 50%;
}
.EG_icons_c {
-webkit-animation: EG_icons_c 10s linear infinite;
-moz-animation: EG_icons_c 10s linear infinite;
-ms-animation: EG_icons_c 10s linear infinite;
animation: EG_icons_c 10s linear infinite;
background-position: 100% 100%;
}
/*20 13 20 13 20 13 */
/*20 33 53 66 86 100 */
@-webkit-keyframes EG_icons_b {
0%,
20% {
opacity: 0;
}
33%,
53% {
opacity: 1;
}
66%,
100% {
opacity: 0;
}
}
@-moz-keyframes EG_icons_b {
0%,
20% {
opacity: 0;
}
33%,
53% {
opacity: 1;
}
66%,
100% {
opacity: 0;
}
}
@-ms-keyframes EG_icons_b {
0%,
20% {
opacity: 0;
}
33%,
53% {
opacity: 1;
}
66%,
100% {
opacity: 0;
}
}
@keyframes EG_icons_b {
0%,
20% {
opacity: 0;
}
33%,
53% {
opacity: 1;
}
66%,
100% {
opacity: 0;
}
}
@-webkit-keyframes EG_icons_c {
0%,
53% {
opacity: 0;
}
66%,
86% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes EG_icons_c {
0%,
53% {
opacity: 0;
}
66%,
86% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-ms-keyframes EG_icons_c {
0%,
53% {
opacity: 0;
}
66%,
86% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes EG_icons_c {
0%,
53% {
opacity: 0;
}
66%,
86% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes iconsbg_container {
0%,
53% {
background-color: #ffffff;
}
66%,
86% {
background-color: #48616e;
}
100% {
background-color: #ffffff;
}
}
@-moz-keyframes iconsbg_container {
0%,
53% {
background-color: #ffffff;
}
66%,
86% {
background-color: #48616e;
}
100% {
background-color: #ffffff;
}
}
@-ms-keyframes iconsbg_container {
0%,
53% {
background-color: #ffffff;
}
66%,
86% {
background-color: #48616e;
}
100% {
background-color: #ffffff;
}
}
@keyframes iconsbg_container {
0%,
53% {
background-color: #ffffff;
}
66%,
86% {
background-color: #48616e;
}
100% {
background-color: #ffffff;
}
}
<div class="iconsbg_container">
<div class="icons_container">
<div class="EG_icons_a">
<div class="EG_icons_b"></div>
<div class="EG_icons_c"></div>
</div>
</div>
</div>
我制作了一个基本的CSS幻灯片,但在某些分辨率下使用Chrome时,我在图像的右侧会出现一条白色像素线。
我在IE或Firefox上根本没有这条线。
目前我在桌面上使用Chrome 64.0.3282.186,但我也在手机上看到它。
我觉得我错过了一些明显的东西;任何帮助表示感谢。
答案 0 :(得分:1)
这条白色的1px线是你第二次插入的背景图片的一部分,因为浏览器中有一些关于计算背景图像宽度的小错误。为避免这种情况,您必须在css中添加一行。对于.EG_icons_a, .EG_icons_b, .EG_icons_c
添加background-repeat: no-repeat;
- 它会有所帮助。