Question

我想使用此link中存在的CSS3创建此效果。

在此页面中，存在四个具有美观和高级效果的圆形图像。效果是图像顶部的半透明叠加，在图像悬停时移动/收缩。最初，图像是透明的（没有叠加），当悬停过渡完成时，图像将获得半透明叠加。

Answer 1

如果您正在寻找悬停在带有图像的圆圈时显示的效果，则可以使用box-shadow和伪元素（如下面的代码段中所示）来实现。

伪元素的box-shadow的展开半径等于容器的大小，以便在元素上生成半透明叠加层。最初伪元素的大小与容器的大小相同，由于这个和父级的overflow: hidden，阴影是不可见的。悬停在图像上时，伪元素的高度和宽度会慢慢转换为0px，这会使框阴影变为可见（因此最终显示透明叠加）。

translateX(-50%) translateY(-50%)变换效果用于将伪元素定位在容器元素的中间中点。

div {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background: url(http://lorempixel.com/200/200/nature/1);
  overflow: hidden;
}
div:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%) translateY(-50%);
  transition: all 1s;
}
div:hover:after {
  height: 0%;
  width: 0%;
}

<div class='shadow-circle'></div>

在悬停时收缩半透明覆盖层

1 个答案: