[分享]css光的效果图

CSS（层叠样式表）光的效果图是在设计和开发网站时非常常用的一种效果。它给网页增添了许多视觉吸引力，为用户提供了更好的用户体验。下面，我们将展示一些实现 CSS 光效果图的简单代码。 / 创建一个 ...

CSS（层叠样式表）光的效果图是在设计和开发网站时非常常用的一种效果。它给网页增添了许多视觉吸引力，为用户提供了更好的用户体验。下面，我们将展示一些实现 CSS 光效果图的简单代码。

/* 创建一个 div 元素用于创建光效果 */
div {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
}

/* 在 div 元素中添加一个伪元素，用于创建光效果 */
div::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.08) 65%, rgba(255,255,255,0.04) 100%);
  filter: blur(30px);
  opacity: 0;
  transition: opacity .3s ease-out;
}

/* 在 div 元素上添加鼠标悬停效果 */
div:hover::before {
  opacity: 1;
} 

以上代码非常简单，但它确实能够在网页中创建出非常酷炫的光效果。首先，我们创建了一个 div 元素，它是一个相对定位的块级元素，具有指定的宽度和高度。接着，我们使用 ::before 伪元素为 div 元素创建了光效果。

该伪元素的内容为空，它是绝对定位的，然后使用 top 和 left 属性定位在其父级 div 元素的左上角。接下来，我们使用 calc() 函数为其设置了 width 和 height 属性，这将使div元素周围的伪元素扩展出一个较大的区域，以便在悬停时光效果更加明显。最后，我们定义了一个线性渐变，它是由透明度的白色颜色停止和预定义的位置组成的，使其产生一个描绘出光效果的模糊边缘。

最后我们为伪元素添加了悬停效果，这将使其opacity属性从0变为1，从而在鼠标悬停时显示光效果。

在这个例子中，我们使用了简单的 CSS 属性和伪元素，但是这样的光效果在 你的网站设计中可以发挥出很高的作用，为你的用户带来更好的体验。