HTML5 5/CSS3 3映像栈
HTML5 5/CSS3 3映像栈
提问于 2012-07-12 09:13:21
我知道有很多例子，但基本上不涉及任何垃圾，如何使用新的HTML5 + CSS3样式进行图像堆栈，即：
- 只有当时显示的单一图像
- 在某一事件发生后，在先前的图像上显示的下一张图像(例如鼠标向下；循环)
我想知道如何使用新的HTML5/CSS3风格做这件简单的事情？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-07-12 09:21:01
我找到了一个幻灯片的很好的例子，如果这是你想要的，而不是额外的。一个显示下一张照片的计时器，另一个显示改变背景的计时器。
CSS3解决方案和每一步的很好的教程
计时幻灯片(框)
计时幻灯片(背景)
我希望我没有误解你的问题。
Stack Overflow用户
发布于 2012-07-12 09:27:17
就我个人而言，我会使用jQuery循环- 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，所以循环是您的最佳选择。
Stack Overflow用户
发布于 2012-07-12 09:29:57
这是我发现的最好的
.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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11448555
复制相关文章
相似问题
腾讯云开发者
