Question

我尝试使用css来实现此效果。这是效果：

我尝试将div设为：

  div {
    height: 300px; 
    width: 10px; 
    position: absolute; 

    border-radius: 0px 500px 500px 0; 
    -moz-border-radius: 0px 500px 500px 0; 
    -webkit-border-radius: 0px 500px 500px 0; 
    background-color: grey; 
    opacity:0.1;
  }

然后通过css改变这个效果的宽度。但它看起来非常难看它更方形然后是圆形而且我宽度的变化也不会使它变得像效果一样。看起来形状的宽度变得更大但不会变得更圆...

如何通过css / js实现此效果？我尝试使用div的所有内容都非常糟糕。

感谢。

Answer 1

由于其形状，效果有点棘手。关键是你使用div创建的圆圈必须大部分都在屏幕外移动，以获得与你给出的例子更符合的曲线。

.container .effect{
    position:absolute;
    width:200px;
    height:80%;
    top:10%;
    right:-140px;
    background-color:#fff;
    border-radius:100% 100% 100% 100%;
    transition:width 500ms ease-in-out, right 500ms ease-in-out, opacity 500ms ease-in-out;
    opacity:.7;
}

Here is a fiddle了解更多细节。尝试转动溢出：隐藏在.container元素上以查看最新的详细信息。 JavaScript只是为了显示正在发生的效果。

**旁注：背景图片不是我自己的，用于教育目的。 Credit属于原所有者。

Answer 2

这是使用伪元素和变换的另一种观点。当滚动到达两侧时，将显示仿橡皮带效果。

使用鼠标滚动在非触摸屏桌面上进行测试。对于Chrome，可以模拟鼠标事件进行测试。

演示小提琴：http://jsfiddle.net/abhitalks/v4mLkttL/

演示代码段：

＆＃13;

var $wrap = $('#wrap'), startX, isDrag = false;

$wrap.on('touchstart', function(e) {
    startX = e.originalEvent.touches[0].clientX; isDrag = true;
});
$wrap.on('touchmove', function(e) {
    var delta = e.originalEvent.changedTouches[0].clientX - startX, 
        pos = $(this).scrollLeft(), w = $(this).width(), 
        iw = $(this).innerWidth(), sh = this.scrollWidth
    ;
    if (isDrag) {
        if ((delta > 0) && (pos <= 0)) {
            $wrap.addClass('rubberLeft');
            isDrag = false; e.preventDefault(); 
        }
        if ((delta < 0) && (pos + iw >= sh)) {
            $wrap.addClass('rubberRight');
            isDrag = false; e.preventDefault(); 
        } 
    }
});
$wrap.on('touchend', function(e) {
    isDrag = false; clearRubber();
});

$wrap.on('mousewheel DOMMouseScroll', function(e) {
    var start = e.originalEvent, 
        delta = start.wheelDelta || -start.detail, 
        pos = $(this).scrollLeft(), w = $(this).width(), 
        iw = $(this).innerWidth(), sh = this.scrollWidth
    ;
    this.scrollLeft += delta * -1;
    if (pos <= 0) { $wrap.addClass('rubberLeft'); setTimeout(clearRubber, 600); }
    else if (pos + iw >= sh) { $wrap.addClass('rubberRight'); setTimeout(clearRubber, 600); }
    else { clearRubber(); }
    e.preventDefault();    
});

function clearRubber() { $wrap.removeClass('rubberLeft').removeClass('rubberRight'); }

＆＃13;

* { box-sizing: border-box; padding: 0; margin: 0; }
html, body { height: 100vh; width: 100vw; overflow: hidden; }
#wrap {
    min-width: 100vw; height: 100vh;
    overflow-y: hidden; overflow-x: scroll;
    background-color: #000; white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
#wrap img { display: inline-block; vertical-align: top; }
#wrap::before, #wrap::after {
    content: ''; display: block;
    position: absolute; top: 4%; 
    width: 100px; height: 90%;
    background-color: rgba(255,255,255,0.6);
    box-shadow: 0 0 10px 4px rgba(0,0,0,0.5);
    border-radius: 50%; transform: translateX(0px);
    transition: transform 0.5s;    
}
#wrap::before { left: -105px; }
#wrap::after { right: -105px; }
#wrap.rubberLeft::before { transform: translateX(45px); }
#wrap.rubberRight::after { transform: translateX(-45px); }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
    <img class="page" src='//lorempixel.com/240/320' />
    <img class="page" src='//lorempixel.com/241/320' />
    <img class="page" src='//lorempixel.com/239/320' />
    <img class="page" src='//lorempixel.com/240/320' />
    <img class="page" src='//lorempixel.com/241/320' />
    <img class="page" src='//lorempixel.com/239/320' />
</div>

＆＃13;

使android刷卡结束效果

2 个答案: