Question

我已完成此Sliding Image Panels with CSS3教程，并在使用:checked启动动画时遇到了一个小问题。这是official demo和is my take（现在是webkit和mozilla）。

点击时图像会发生变化，但面板不会滑动，而是会在初始页面加载时滑动，这似乎是CSS告诉它做的事情......有什么想法吗？

干杯。

Answer 1

抱歉，这是PEBCAK。

我最后留下了一个尾随的逗号，就像这样 - 最后看到那个小逗号？不好意思。


.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4), {

从而使整个声明块无效。

Answer 2

你错过了这个：

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1), .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3), .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) {
    -moz-animation: 0s ease 0s normal none 1 none;
    -moz-transition: left 0.5s ease-in-out 0s;
    left: 0;
    z-index: 10;
}

在输入上启动CSS动画：选中？

2 个答案: