CSS 8种让人眼前一亮的hover效果眼前一亮的HOVER效果

以下是一些使用CSS创建的简单而又炫目的hover效果的示例代码：

1. 放大效果:

div {
  transition: transform 0.5s ease;
}
 
div:hover {
  transform: scale(1.1);
}

2. 阴影扩散效果:

div {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.5s ease;
}
 
div:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

3. 颜色渐变效果:

div {
  background-color: #f00;
  transition: background-color 0.5s ease;
}
 
div:hover {
  background-color: #0f0;
}

4. 图片过渡效果:

img {
  transition: filter 0.5s ease;
}
 
img:hover {
  filter: grayscale(100%);
}

5. 文字阴影和缩放效果:

h1 {
  transition: text-shadow 0.5s ease, transform 0.5s ease;
}
 
h1:hover {
  text-shadow: 0 0 15px #000;
  transform: scale(1.1);
}

6. 旋转效果:

div {
  transition: transform 0.5s ease;
}
 
div:hover {
  transform: rotate(360deg);
}

7. 渐变色背景效果:

div {
  background: linear-gradient(45deg, #f00, #0f0);
  transition: background-size 0.5s ease;
}
 
div:hover {
  background-size: 200% 200%;
}

8. 边框粗细变化效果:

div {
  border: 2px solid #000;
  transition: border-width 0.5s ease;
}
 
div:hover {
  border-width: 5px;
}

这些例子展示了如何使用CSS的hover选择器和transition属性来创造各种视觉效果，使得网页元素在鼠标悬停时变得更加引人注目。