css3 hover发光效果

CSS3可以实现很多惊艳的效果，在这里我们重点介绍一种利用CSS3的hover属性来实现发光效果的方法。

.hover-glow {
      position: relative;
}
.hover-glow:hover::before {
      content: ';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff;
      opacity: 1;
      transition: opacity .3s ease-in-out;
}
.hover-glow::before {
      content: ';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff;
      opacity: 0;
}
    

上述代码可以让指定的元素在鼠标悬停时生成一个iframe，对应的css样式可以实现发光的效果。

首先，在元素的css类名中添加代码.hover-glow。

代码的核心是使用了:before做伪元素，这样可以使元素上生成一个与元素同大小的伪元素，然后这个伪元素上面添加多层box-shadow。在原始状态下让它们透明，当用户鼠标悬停时将其透明度增加至1，从而实现发光的效果。

在此方法中，box-shadow的最后一层显示在最上面，你也可以根据需要调整不同层之间的位置和大小，以获得更符合你要求的效果。

总的来说，这是一个简单而非常有效的CSS3技巧，可以为你的网站添加一种现代、时尚的感觉，提高用户的体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！