css去掉鼠标经过特效

CSS中的发光呼吸灯可以为网页增添一份神秘与魅力，让网页更加生动活泼。下面我们来看一下如何使用CSS实现发光呼吸灯效果。

/* 设置外层容器样式 */
.container {
  width: 100px;
  height: 100px;
  position: relative;
}

/* 设置内部元素为圆形，并设置初始样式 */
.light {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation: breathe 2s infinite;
}

/* 设置呼吸灯动画，实现发光效果 */
@keyframes breathe {
  /* 开始时，元素为不透明且颜色为红色 */
  0% {
    opacity: 1;
    background-color: red;
    Box-shadow: 0 0 10px red;
  }

  /* 50%的时候，元素为半透明且颜色为白色 */
  50% {
    opacity: 0.5;
    background-color: white;
    Box-shadow: 0 0 20px white;
  }

  /* 结束时，元素为不透明且颜色为红色 */
  100% {
    opacity: 1;
    background-color: red;
    Box-shadow: 0 0 10px red;
  }
}

以上就是CSS实现发光呼吸灯的全部代码。首先，我们要为需要呼吸灯效果的元素设置外层容器的样式，然后在内部元素里面设置样式，包括圆形、定位等。最后，通过设置呼吸灯动画，实现发光效果。如果需要在网页中增加神秘魅力，那就试着加上这个呼吸灯效果吧！