如何在 CSS/JavaScript 中重新创建这种遮罩效果？

Question

我正在尝试在此处重新创建 gif 中显示的效果。即使有两个单独的图像也很好 - 我不需要重新创建灰度/模糊效果（尽管我可以使用 webkit 过滤器） - 这只是我遇到问题的遮罩。

基本上我有一个轮播滑块，当它左右滑动时，当前幻灯片下方的背景会变得模糊，以使顶部的文本更加明显。当滑块作为蒙版移动时，我无法将背景保持在同一位置。我怎样才能重新创建它？

编辑：我已经设法解决了这个问题：http://jsfiddle.net/9xk410wk/18/ 我在相反的方向使用了 CSS 变换：

.tile {
    -webkit-transform: translate3d(-400px, 0px, 0px);
}
.blur > div {
    -webkit-transform: translate3d(400px, 0px, 0px);
}
.tile:hover {
    -webkit-transform: translate3d(400px, 0px, 0px);
}
.tile:hover .blur > div {
    -webkit-transform: translate3d(-400px, 0px, 0px);
}

Answer 1

您可以为此使用 webkit 灰度过滤器：

FIDDLE（将鼠标悬停在图片上查看效果）

标记

<div class="pic">
    <div class="mask">SLIDER</div>
</div>

CSS

.pic {
    width:288px;
    height: 214px;
    background: url(https://dl.dropboxusercontent.com/u/51558405/pic.png) no-repeat;
    position:relative;
    overflow: hidden;
}
.pic:hover  .mask {
    -webkit-transform: translate3d(228px, 0, 0);
    background-position: 100% 0;
}
.mask {
    width: 60px;
    height: 214px;
    position: absolute;
    left:0;
    top:0;
    color: #fff;
    background: url(https://dl.dropboxusercontent.com/u/51558405/pic.png) 0 0 no-repeat;
    -webkit-transition: all 1.5s linear;
    transition: all 1.5s linear;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-filter: grayscale(100%);
    z-index:1;
}

Answer 2

我不确定您在没有看到代码的情况下遇到的确切问题，但这是我创建的一个模仿 gif 的粗略小提琴：

http://jsfiddle.net/z71g26by/

我刚刚使用了 CSS3 线性动画并更改了移动面板的不透明度。我只是使用了颜色，但它应该与背景图像相同。

CSS：

body {
    /*To hide the horizontal scroller */
    overflow: hidden;
}

.container {
    width: 500px; 
    height: 420px; 
    background-color:blue;
}

.panel { 
    width: 200px; 
    height: 420px; 
    background-color: white; 
    opacity: .8; 
    -webkit-animation: move 5s linear infinite;

}

@-webkit-keyframes move {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
}

HTML：

<div class="container">
    <div class="panel"><p>SLIDER</p></div>
</div>

注意：这仅适用于 webkit，但您可以添加适当的前缀以使其在其他浏览器中运行。