我的幻灯片播放有点问题。 我需要在幻灯片之间保持30秒钟的暂停,但是它不起作用(GoogleChrome和Safari)。而且我只能使用CSS,而不能使用JS或PHP。 你能帮助我吗?谢谢。
代码CSS:
.slide_show {
animation-name: slideShow;
animation-duration: 10s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
}
@keyframes slideBg {
0% {
background-image: url('img/001.jpg');
}
33% {
background-image: url('img/002.jpg');
}
66% {
background-image: url('img/003.jpg');
}
100% {
background-image: url('img/001.jpg');
}
答案 0 :(得分:0)
所以,我自己找到了这个解决方案。
-webkit-animation-name: slideBg;
-webkit-animation-duration: 80s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@keyframes slideBg {
0% {
background-image: url('img/001.jpg');
}
30% {
background-image: url('img/001.jpg');
}
31% {
background-image: url('img/002.jpg');
}
63%
{
background-image: url('img/002.jpg');
}
66% {
background-image: url('img/003.jpg');
}
97%
{
background-image: url('img/003.jpg');
}
100% {
background-image: url('img/001.jpg');
}
}
现在,您的幻灯片停止了大约30秒钟,在一秒钟之内便发生变化。