我将伪类和关键帧一起用于图像的滑动动画，但我无法在浏览器上渲染动画。请帮我调试这段代码。提前致谢 :)。
<html>
<style>
#fullimage > li:target {
animation: slideImage 50s linear;
-webkit-animation: slideImage 50s linear;
-moz-animation: slideImage 50s linear;
}
@keyframes slideImage {
from { left: -700px; }
to { left: 0px; }
}
@-webkit-keyframes slideImage {
from {left: -700px; }
to { left: 0px; }
}
@-moz-keyframes slideImage {
from {left: -700px; }
to { left: 0px; }
}
</style>
<body>
<div id="wrapper">
<ul id="fullimage">
<li id="a">
<img src ="a.jpg" />
</li>
<li id="b">
<img src ="images/b.jpg" />
</li>
<li id="c">
<img src ="c.jpg" />
</li>
</ul>
<ul id="thumbimage">
<li>
<a href="#a">
First one
</a>
</li>
<li>
<a href="#b">
Second one
</a>
</li>
<li>
<a href="#c">
Third one
</a>
</li>
</ul>
</div>
</body>
</html>
最佳答案
您的动画和关键帧代码看起来不错，但您需要设置 position 属性以使 left 起作用。
#fullimage > li:target {
position: relative;
}
关于html - 使用伪类的关键帧不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32940241/