css - 悬停时使用 CSS 在圆形图像周围发光

Question

我希望在我拥有的圆形图像周围有一个“发光”效果(它看起来像一个圆，但它实际上是一个带有透明像素的方形图像，使其看起来像一个圆)。

有没有一种简单有效的方法可以使用 CSS 来做到这一点？我已经尝试过 box shadow，但它似乎无法正常工作。

Answer 1

你可以用 box-shadow 和 CSS animation 做这样的事情

img {
  margin: 30px;
  border-radius: 50%;
  box-shadow: 0px 0px 9px 4px #747DE8;
  animation: glow 1.5s linear infinite alternate;
}

@keyframes glow{
  to {
    box-shadow: 0px 0px 30px 20px #535FED;
  }
}

<img src="http://placehold.it/150x150/000000/ffffff">

你也可以使用一些 Filters在 img 上。 Support

.element {
  margin: 50px;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  box-shadow: 0px 0px 9px 4px #747DE8;
  animation: glowShadow 1.5s linear infinite alternate;
}

img {
  width: 100%;
  height: 100%;
  animation: glowImage 1.5s linear infinite alternate;
}

@keyframes glowShadow{
  to {
    box-shadow: 0px 0px 35px 15px #535FED;
  }
}

@keyframes glowImage{
  to {
    -webkit-filter: brightness(2);
     filter: brightness(2);
  }
}

<div class="element">
  <img src="http://www.officialpsds.com/images/thumbs/Blue-Planet-psd85316.png">
</div>