[分享]css光圈效果逐渐变大

光圈效果是网站设计中的常见效果之一。它可以让图片或文本在被鼠标滑过时，出现层层逐渐扩大的光圈效果。在CSS中，我们可以使用伪类实现光圈效果。.btn { : relative; display: in...

光圈效果是网站设计中的常见效果之一。它可以让图片或文本在被鼠标滑过时，出现层层逐渐扩大的光圈效果。在CSS中，我们可以使用伪类实现光圈效果。

.btn {
  position: relative;
  display: inline-block;
  padding: 20px 40px;
  background-color: #333;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
}

.btn:hover::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  animation: ripple 1.2s linear infinite;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }

  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
} 

上面的代码实现了一个鼠标滑过时逐渐扩大的光圈效果。.btn元素是一个普通的按钮，当鼠标滑过时，它的::before伪类被激活。这个伪类设置了一个圆形的背景色，并通过animation属性指定了一个名为ripple的动画。

ripple动画定义了光圈效果的逐渐变大，即从0%的大小开始，逐渐变为比原来大两倍的大小，透明度从0.5变为0，然后再从0%开始循环播放。通过这个动画，我们实现了一个逐渐扩大的光圈效果。

总体来说，CSS中的光圈效果是比较简单的，通过伪类和动画就可以实现一个炫酷的效果。如果你也想让你的网站更加精彩，可以尝试在你的设计中加入光圈效果。