问CSS图像滑块动画不工作
EN

Stack Overflow用户

提问于 2015-04-22 14:31:54

回答 1查看 358关注 0票数 0

我是新来的，我会尽量简化我的问题。如果我违反了任何规则我很抱歉。我试图做一个简单的css淤塞图像。

当我做动画代码，我希望图片从左边淡出我选择的每一个链接。我正在做所有的事情，就像视频上说的，但是它不起作用。

@-webkit-keyframes 'slide'{
0% {left:-500px;}
100%{left: 0}

}

ul.slides li:target {
z-index: 100;
-webkit-animation-name: slide;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:1;
}

<!DOCOTYPE html>
<html>
  <head>
   <title>pure CSS Slider</title>

<link rel="stylesheet" href="file:///D:/CSS%20projects/CSS%20slider/style.css"/>



  </head>


<body>

<div id="container">
	<h1>pure CSS Slider</h1>
    
     <ul class="tumbs">

     <li><a href="#slide-1"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb1.jpg">
     	<span>this is image 1</span></a></li>
     <li><a href="#slide-2"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb2.jpg"><span>this is image 2</span></a></li>
     <li><a href="#slide-3"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb3.jpg"><span>this is image 3</span></a></li>
     <li><a href="#slide-4"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb4.jpg"><span>this is image 4</span></a></li>
     <li><a href="#slide-5"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb5.jpg"><span>this is image 5</span></a></li>
     <li><a href="#slide-6"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb6.jpg"><span>this is image 6</span></a></li>
     <li><a href="#slide-7"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb7.jpg"><span>this is image 7</span></a></li>


     </ul>


    <ul class="slides">
<li class="first" id="slide-1"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-1.jpg">
</li>
<li  id="slide-2"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-2.jpg">
</li>
<li  id="slide-3"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-3.jpg">
</li>
<li  id="slide-4"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-4.jpg">
</li>
<li  id="slide-5"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-5.jpg">
</li>
<li  id="slide-6"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-6.jpg">
</li>
<li  id="slide-7"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-7.jpg">
</li>

</ul>

 </div>


</body>
</html>

css

回答 1

Stack Overflow用户

发布于 2015-04-23 07:39:04

您的代码无法工作，因为：

left只适用于以某种方式(relative、absolute、fixed)使用position定位的元素。因此，将其添加到li/img CSS中。或者，您可以使用transform: translateX(-500px);

JSFiddle - http://jsfiddle.net/njyu7qhk/1/

因此，相关的CSS应该如下所示：

@-webkit-keyframes slide {
    0% { left: -500px; }
    100% { left: 0; }
}

ul.slides li:target {
    z-index: 100;
    position: relative;
    -webkit-animation: slide 1s;
}

我还删除了keyframes名称中的引号。这似乎与他们的工作，但我认为这是“标准”命名它没有引号。不过对此还不太确定。

祝好运。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29800824

复制

相似问题

问CSS图像滑块动画不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS图像滑块动画不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS图像滑块动画不工作
EN