如何使用 CSS3、jQuery 和 HTML 创建图像队列效果？ [关闭]答案

【问题标题】：How to create image queue effect using CSS3, jQuery, and HTML? [closed]如何使用 CSS3、jQuery 和 HTML 创建图像队列效果？ [关闭]
【发布时间】：2016-09-06 06:29:10
【问题描述】：

如何使用 CSS、jQuery 和 HTML 创建这种效果？

【问题讨论】：

CSS filter 会帮助你 - developer.mozilla.org/en-US/docs/Web/CSS/filter
顺便说一句，到目前为止您尝试了什么？你有什么工作要做吗？
no.. 我没有 css 过滤器的工作经验。 :(
我添加了一个答案，希望对你有帮助？？？？
haii 感谢您的帮助。这是我真正想要的。再一次感谢你。 (y) :) 。我怀疑它是否会增加页面加载时间？？？

标签： jquery html image css

【解决方案1】：

我在工作中有一些空闲时间，所以这里有一个您正在寻找的示例 (jsFiddle)：

[-] html

<div class="wrapper">
    <div class="container">
        <img src="http://pipsum.com/200x150.jpg">
    </div>
    <div class="container">
        <img src="http://placekitten.com/200/150">
    </div>
</div>

[-] js

$('img', '.container').each(function(){
    var $this = $(this);
    $this.clone().addClass('top').insertBefore($this);
    $this.clone().addClass('mid').insertBefore($this);
    $this.addClass('bot');
});

[-] css

body { background: black; padding: 20px; }
.container { position: relative; display: inline-block; margin-right: 20px; width: 200px; }
.container img { display: block; border-radius: 6px 6px 0 0; }

.container img.top,
.container img.mid,
.container img.bot { position: absolute; margin: auto; left: 0; right: 0; }

.container img.top,
.container img.mid { -webkit-filter: blur(.2px); }

.container img.top { opacity: .8; width: 80%; z-index: 0; -webkit-filter: brightness(80%); }
.container img.mid { top: 10px; opacity: .5; width: 90%; z-index: 1; }
.container img.bot { top: 20px; z-index: 2; }

记住：https://developer.mozilla.org/en-US/docs/Web/CSS/filter

【讨论】：