Question

我有一个工作的CSS3轮播的小提琴。

有人可以告诉我为什么

width: 25%;

在最后一行CSS的CSS中，它做了什么？

这是CSS轮播的工作小提琴。

http://jsfiddle.net/gautamz07/k6zZG/

Answer 1

整个“幻灯片效果”基于触发CSS3效果的单选按钮。作者将4张图像相继放置，每张图像宽度为25％，使其一起宽度为100％。单击单选按钮时，将触发过渡效果，并显示包含所有图像的另外25％的div。

单选按钮

<input checked type="radio" name="slide" class="control" id="Slide1"/>
<label for="Slide1" id="s1"></label>
...

点击单选按钮

#Slide2:checked ~ .overflow-wrapper{ margin-left: -100%; }

CSS3过渡效果

.overflow-wrapper{
    width: 400%;
    ...
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

我希望这能回答你的问题。

如果没有 - 请查看我更新的jsFiddle版本（将宽度更改为10％）：http://jsfiddle.net/k6zZG/4/您可能会自行解决这个问题！

CSS3轮播中的宽度是多少？

1 个答案: