Question

我想知道如何使覆盖物从其中心逐渐消失，从而使覆盖后方的图像通过从中心开始逐渐增大的圆圈变得可见。我知道有现有的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();
})

Answer 1

也许考虑使用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;
}

从中心叠加淡出

1 个答案: