如何在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，但您可以添加适当的预修复程序，以使其在其他浏览器中运行。