Question

我想重新创建一个我在airforce.com上看到的效果。它就在英雄的正下方，我捅了一下，看不出他们做了什么。看起来它是使用knockout开发的，但我想使用jQuery和Css重新创建它。

如果你知道这个效果是什么，或者知道可以实现这个目标的图书馆，请告诉我们谢谢！

https://www.airforce.com/

Answer 1

我只使用css创建了一个简单的效果模型。查看小提琴

https://jsfiddle.net/rob_primacy/p6ee9d71/2/

<div class="image-block">
   <div class="image"></div>
</div>

.image-block {
    position: relative;
    width: 300px;
    left: 200px;
}

.image { 
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    transition: all ease .3s;
    height: 600px;
    background: url("http://www.difrusciaphotography.com/wp-content/uploads  /2015/08/Place-to-unwind_Lake-Kananaskis-Alberta-Canada.jpg") #000 no-repeat center center;}

.image-block:hover .image {
     left: -40px;
     right: -40px;
     transition: all ease .3s;
 }

水平导航滑出增长效果

1 个答案: