Question

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

使用CSS有一种简单有效的方法吗？我尝试了盒子阴影，但它似乎没有正常工作。

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">

您也可以在img上使用一些Filters。 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>

Answer 2

这应该对你有帮助。

.box-shadow {
  -webkit-box-shadow: 0px 0px 8px 5px black;
  -moz-box-shadow: 0px 0px 8px 2px light green;
  box-shadow: 0px 0px 8px 2px light blue;
}

<div class="box-shadow">
  <img src="path to image" />
  <h1> Text In a Glowing Box.</h1>
</div>

Answer 3

您需要使用border-radius：属性和：hover伪类的组合来获得所需的效果。

基本上，将图像border-radius设置为50％ - 这将使您的图像成为完美的圆形。使用：hover psuedoclass将允许您设置鼠标的样式：悬停事件。

HTML：

<img src="https://aedesnoyers.files.wordpress.com/2011/12/night11.jpg" class="round-hover" />

您的CSS看起来像：

.round-hover {
  height: 200px;  /*Resize for Fiddle*/
  width: 200px;
  border-radius: 50%;
}

.round-hover:hover{

  /* thank you @Morgan Clark */
  -webkit-box-shadow: 0px 0px 8px 5px black;
  -moz-box-shadow: 0px 0px 8px 2px light green;
  box-shadow: 0px 0px 8px 2px light blue;
}

在小提琴中看到这里：

Shadow over image when hovering

- SIDE NOTE-- box-shadow：属性的前两个0使得它在你的盒子阴影中没有偏移。这使它看起来“发光”

修改看到@NENAD的答案后，我可能误解了所谓的“发光”效果。

在悬停时使用CSS围绕圆形图像发光

3 个答案: