滑块 - 主动模糊

Question

我目前有这个

我希望它看起来像

我尝试了很多方法都没有用，请帮助我！

我正在使用 owl 轮播

我的CSS:

#owl-slider .item{
    padding: 30px 0px;
    margin: 10px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
.customNavigation{
  text-align: center;
}
.customNavigation a{
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.image-fade-left {
    -webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,1), rgba(0,0,0,0));
}

.image-fade-right {
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0));
}

我的html:

<div class="image-fade-right">
    <div class="image-fade-left">
        <div id="owl-slider" class="owl-carousel">
            <div class="item">
                <img class="lazyOwl" data-src="" alt="">
            </div>
            <div class="item">
                <img class="lazyOwl" data-src="" alt="">
            </div>
            <div class="item">
                <img class="lazyOwl" data-src="" alt="">
            </div>
            <div class="item">
                <img class="lazyOwl" data-src="" alt="">
            </div>
            <div class="item">
                <img class="lazyOwl" data-src="" alt="">
            </div>
            <div class="item">
                <img class="lazyOwl" data-src="" alt="">
            </div>
        </div>
    </div>
</div>

完整代码：http://hastebin.com/hevogeqijo.xml

谢谢！

Answer 1

您可以只使用一个 class 而不是两个来做到这一点：

.image-fade {
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,0));
}

我所做的是向渐变添加更多 "anchor" 点，使其在两个边框 (rgba(0,0,0,0)) 处为白色，在中心处为透明 (rgba(0,0,0,1))。

或者，如果你想至少修改你的代码，试试这个：

.image-fade-left {
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,1));
}

.image-fade-right {
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));
}

滑块 - 主动模糊

Slider - Active blur

html

css

jquery

slider

owl-carousel