3
似乎无法让我的图像滑块工作,我打算将此作为我的页面的标题,但图像不会滑动。我已经尝试了Chrome的前缀,但它们没有改变。@keyframes不适用于幻灯片
<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%;
}
}