我已完成此Sliding Image Panels with CSS3教程,并在使用:checked
启动动画时遇到了一个小问题。这是official demo和is my take(现在是webkit和mozilla)。
点击时图像会发生变化,但面板不会滑动,而是会在初始页面加载时滑动,这似乎是CSS告诉它做的事情......有什么想法吗?
干杯。
答案 0 :(得分: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), {
从而使整个声明块无效。
答案 1 :(得分:0)
.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;
}