Question

我是CSS3动画的新手，我在尝试创建幻灯片菜单时遇到了一个小问题。

我有以下HTML代码：

<div id="greenPart">
    <input type="checkbox" id="hackyCheckBox">
    <label for="hackyCheckBox">
        <img class="test" src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
    </label>
</div>

和这个CSS代码：

#hackyCheckBox{display: none;}

.test{
    height: 30px;
    width: 50px;
}

#greenPart{height: 100px; width: 300px; background-color: green;}

.test, #greenPart{
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

#hackyCheckBox:checked + label img.test{
    transform:         translate(160px,0px); /* CSS3 */
    -moz-transform:    translate(160px,0px); /* Firefox */
    -webkit-transform: translate(160px,0px); /* Webkit */
    -o-transform:      translate(160px,0px); /* Opera */
    -ms-transform:     translate(160px,0px); /* IE 9 */
}

我的问题是当我点击蝙蝠侠标志时，只有徽标移动，而不是div。这是jsfiddle，如果它可以帮助你：http://jsfiddle.net/1yLqzyjf/2/

Answer 1

将div#greenPart和img元素移到label内并使用适当的选择器 - ＆gt; #hackyCheckBox:checked + label div#greenPart。

＆＃13;

#hackyCheckBox {
  display: none;
}
.test {
  height: 30px;
  width: 50px;
}
#greenPart {
  height: 100px;
  width: 300px;
  background-color: green;
}
.test,
#greenPart {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -ms-transition-property: -ms-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
}
#hackyCheckBox:checked + label div#greenPart {
  -webkit-transform: translate(160px, 0px);
  -ms-transform: translate(160px, 0px);
  transform: translate(160px, 0px);
}

＆＃13;

<input type="checkbox" id="hackyCheckBox">
<label for="hackyCheckBox">
  <div id="greenPart">
    <img class="test" src="http://www.vectortemplates.com/raster/batman-logo-big.gif" />
  </div>
</label>

＆＃13;

用于移动图像和div的CSS3动画

1 个答案: