使用HTML5/CSS3的图像堆栈

我知道有很多例子，但基本上不涉及任何垃圾，如何使用新的

HTML5+CSS3

样式来进行图像堆栈，即：

• 此时仅显示一幅图像
• 在某个事件（例如，鼠标按下；循环）后，在前一个图像上显示下一个图像

---

我想知道如何使用新的

HTML5/CSS3

风格来做这件简单的事情？

我找到了一个很好的幻灯片示例，如果这是你想要的，没有太多额外的内容。一个显示下一张照片的计时器，另一个改变背景

CSS3解决方案和漂亮的每一步教程

---

我希望我没有误解你的问题。

就我个人而言，我会使用jQuery循环-

$（'#shuffle'）。循环({
外汇：“淡出”，
延迟：-4000
});

老实说，我不确定是否存在HTML5/CSS3方法。这只是常规的CSS，因为您所做的只是将容器设置为图像尺寸，然后将每个图像设置为绝对位置，以便它们“堆叠”在彼此的顶部。然后，循环在所有动画中运行

---

您可以使用CSS3转换，但您在问题中提到了jQuery，所以Cycle是您最好的选择。

这是我发现的最好的转换

.stack {  position: relative; z-index: 10; }
.stack img { max-width: 180px; height: 180px; vertical-align: bottom; border: 5px solid #fff; border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    }

---

你想要图像的幻灯片吗？如果你想使用jQuery，我认为这不是一个真正的HTML5/CSS3问题。^最后一行说@SpaceBeers

我想知道如何使用新的HTML5/CSS3样式来做这件简单的事情。

@Liquid-我看到了，但第一段说的是“+jQuery”，加上jQuery的标签。@Liquid-没错。我喜欢尝试CSS3，但实际的开发人员认为现在jQuery是明智的选择。

.stack {  position: relative; z-index: 10; }
.stack img { max-width: 180px; height: 180px; vertical-align: bottom; border: 5px solid #fff; border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    }