Question

似乎无法使我的图像滑块工作，我打算将其用作我页面的标题，但图像不会滑动。我尝试过chrome的前缀，但它们并没有什么区别。

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<div class ="slider">
  <figure>
    <img src="slider-test-image-1.jpg" >
    <img src="slider-test-image-2.jpg" >
  </figure>
</div>
<body>
</body>
<html>

这是CSS

.slider{
margin:0 auto;
padding:0;
overflow: hidden;
position:relative;

}

.slider figure{
margin:0 auto;
padding: 0;

width:200%;
-webkit-animation: 5s slidy infinate;
position:relative;
left:0;

}
.slider figure img{
margin:0 auto;
padding: 0;
overflow: hidden;
float:left;
width:50%;

position:relative;
}

@-webkit-keyframes slidy{
0%{
  -webkit-left:0%;
}
45%{
  -webkit-left:0%;
}
50%{
  -webkit-left:-100%;
}
100%{
  -webkit-left:-100%;
}

}

Answer 1

您只设置了@-webkit-keyframes和-webkit-animation。您还必须设置@keyframes和animation（不含-webkit-）。接下来，您不要为left，right，top或bottom CSS属性使用前缀。您infinite也拼错了infinate。这是更正后的代码：

.slider {
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.slider figure {
  margin: 0 auto;
  padding: 0;
  width: 200%;
  animation: 5s slidy infinite;
  -webkit-animation: 5s slidy infinite;
  position: relative;
  left: 0;
}

.slider figure img {
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  float: left;
  width: 50%;
  position: relative;
}

@-webkit-keyframes slidy {
  0% {
    left: 0%;
  }
  45% {
    left: 0%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}

<div class ="slider">
  <figure>
    <img src="slider-test-image-1.jpg" >
    <img src="slider-test-image-2.jpg" >
  </figure>
</div>

@keyframes不适用于幻灯片放映

1 个答案: