html - 使用 HTML5/CSS3 的图像堆栈

Question

我知道有很多例子，但基本上没有任何通常涉及的垃圾，如何使用新HTML5 + CSS3样式进行图像堆栈，即：

• 当时只显示一张图片
• 在某些事件之后显示在前一个图像上的下一个图像（例如鼠标按下；循环）

我想知道如何使用新HTML5/CSS3风格来做这个简单的事情？

Answer 1

我找到了很好的幻灯片示例，如果这是您正在寻找的内容，而无需太多额外内容。一个显示下一张照片的计时器，另一个显示更改背景。

CSS3 解决方案和每一步教程都不错

定时幻灯片（方框）
定时幻灯片（背景）

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

Answer 2

这是我发现的最好的

.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);
    }

Answer 3

我个人会使用 jQuery Cycle - http://jquery.malsup.com/cycle/

<div id="shuffle" class="pics">    
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />    
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />    
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />    
</div>

$('#shuffle').cycle({
    fx:     'fade',
    delay:  -4000
});

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

您可以使用 CSS3 过渡，但您在问题中提到了 jQuery，因此 Cycle 是您最好的选择。