[分享]css3悬停鼠标波浪

CSS3是网络开发人员非常喜欢的一个工具。它提供了各种各样的功能和效果，让网站看起来非常精美。 其中一个很好的特性是悬停鼠标波浪效果。 .hoverwave { : relative; display...

CSS3是网络开发人员非常喜欢的一个工具。它提供了各种各样的功能和效果，让网站看起来非常精美。 其中一个很好的特性是悬停鼠标波浪效果。

.hover-wave {
  position: relative;
  display: inline-block;
  overflow: hidden;
  transition: color 0.3s ease;
}
.hover-wave:hover {
  color: #fff
}
.hover-wave:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0;
  border-radius: 100%;
  transform: translate(-50%, -50%);
}
.hover-wave:active:before {
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: width 0.3s ease, height 0.3s ease, opacity 0.5s ease-out;
} 

上面的代码创建了一个名为.hover-wave的类。 它首先将元素的position设置为relative、display设置为inline-block，overflow设置为hidden和过渡动画为color 0.3s ease。当用户将鼠标悬停在元素上时，该元素的颜色会更改为白色。

下一步, 在元素的:before伪元素中，我们创建了一个空的div。我们将其放置在元素的中心。该div首先是不可见的，具有圆形边界，并设置为完全不透明的白色（RGBA值0.7）。 当用户点击元素时，伪元素从中心展开，不断增大，直到其占据整个元素。由于过渡时间设置为0.5s，使得它只要一个非常自然和非常华丽的动画。

为了激活这个效果，我们只需要将我们的元素与.hover-wave类相关联。这个效果可让用户的体验更为特别和吸引人，无论他们是在计算机上或在移动设备上浏览网站。