[分享]css不规则图形的hover

CSS不规则图形的hover效果是网页设计中一种非常有趣的形式。通过改变CSS属性，我们可以制作出各种惊奇的形状，利用:hover伪类可以实现一些非常棒的交互效果。.box { width: 200p...

CSS不规则图形的hover效果是网页设计中一种非常有趣的形式。通过改变CSS属性，我们可以制作出各种惊奇的形状，利用:hover伪类可以实现一些非常棒的交互效果。

.box {
  width: 200px;
  height: 200px;
  background-color: #f1c40f;
  position: relative;
  overflow: hidden;
}

.box:before {
  content: ';
  position: absolute;
  width: 100px;
  height: 100px;
  top: -50px;
  left: -50px;
  border-radius: 50%;
  background-color: #2c3e50;
  transition: transform 0.4s ease-in-out;
  transform: translate(-100%, -100%);
}

.box:hover:before {
  transform: translate(100%, 100%);
} 

上面的代码可以制作一个黄色的正方形，在正方形的上方添加了一个圆形。但是我们并不想让这个圆形一直显示，我们希望在鼠标放到正方形上时显示，鼠标移开后消失。这时候，我们可以使用:hover伪类来实现。

首先，我们在.box元素的:before伪元素中添加transform属性，将它的位置移出正方形。使用:hover伪类时，我们将transform属性的值改变为它在正方形内的位置。这样，在鼠标悬浮在正方形上时，圆形就会位于正方形内，从而呈现出一个非常酷炫的效果。

无论是用来做背景填充，还是用来制作前端交互效果，CSS不规则图形都是一个非常棒的工具。它可以让我们的网页看起来更加美观，同时也可以带来更加丰富的用户体验。