Question

我想将鼠标悬停在一个元素上，并以动画方式显示带有圆形边框的背景图像（想想与聚光灯关闭角色时相反，使他们处于黑色状态，例如在马里奥游戏中...呵呵）。

这是我目前的尝试，基于 Neri_Y's answer 到 How to create a circle hover reveal when hovering over a picture（可能不是正确的方法）：

.icon::after {
  content: "";
  position: absolute;
  left: -5em;                 /* adujust this value */
  top: -5em;                  /* adujust this value */
  width: 20em;               /* adujust this value */
  height: 20em;              /* adujust this value */
  transform: scale(0);
  border-radius: 50%;
  z-index: -1;
  background-image: url(https://i.imgur.com/Yb4Uyux.png);
  transition: all 0.2s ease-out;
}

.icon:hover::after {
  transform: scale(1);
}

<div class="icon">@<div>

注意事项：

正如您现在所看到的，问题是整个图像会变大，而我只想让圆圈变大。
另外，我希望圆圈从元素的中点开始（或者光标的点也可以），而这似乎是从图像的中心扩展？

Answer 1

clip-path 可以做到这一点：

.icon::after {
  content: "";
  position: absolute;
  inset:-5em;
  clip-path:circle(0);
  z-index: -1;
  background: url(https://i.imgur.com/Yb4Uyux.png);
  transition: all 0.2s ease-out;
}

.icon:hover::after {
  clip-path:circle(50%);
}

.icon {
  margin:5em;
  width:1em;
  height:1em;
  display:inline-block;
  position:relative;
}

<div class="icon">@<div>

悬停时显示背景图像的动画圆圈

1 个答案: