从中心叠加淡出

时间:2018-11-20 20:47:56

标签: jquery css animation

我想知道如何使覆盖物从其中心逐渐消失,从而使覆盖后方的图像通过从中心开始逐渐增大的圆圈变得可见。我知道有现有的jQuery方法,例如slideDown()和slideUp()。有没有现成的方法可以达到这种效果,或者我还能怎么做?

如果您可以想象一个黑色的覆盖层,中间有一个洞,显示出后面的图像,并且那个洞变大了,最终露出了后面的整个图像。

这是一个demo,带有上下滑动键。

HTML:

<div id= 'container'>
  <img src=>
  <div id = 'overlay'></div>
</div>

CSS:

#container {
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: blue;
  z-index: 1;
  top: 0;
  left: 0;
}

JS:

$('#container').mouseenter(_=> {
    $('#overlay').slideUp();
});

$('#container').mouseleave(_=> {
    $('#overlay').slideDown();
})

1 个答案:

答案 0 :(得分:0)

也许考虑使用CSS放大图像以使其保持简单?

const symbols = {
   typeMap: Symbol('type.map')
}

interface LangMap {
  [key: string]: string | true,
  golang: string,
  typescript: string,
  java: string,
  swift: string
}

export const setTypeMap = function(v: LangMap) : LangMap{
  v[symbols.typeMap] = true;
  return v;
};
.background {
  background-color: blue;
  width: 200px;
  height: 200px;
  left: 0;
  right: 0;

  position: absolute;
  overflow: hidden;
}

.background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(0.01);
  opacity: 0;
  border-radius: 50%;
  transition: all 0.5s ease;
}

.background:hover img {
  transform: scale(1.5);
  opacity: 1;
}