css反光镜效果

CSS反光镜效果是一种常用的网页设计中的效果之一，它可以让页面中的文字、图片等元素产生出现在镜面上的效果，具有较高的美观度和互动性。以下是一些实现CSS反光镜效果的代码示例。

/*示例1：单行反光*/
.reflect {
  /*设置容器为相对定位*/
  position: relative;
}
.reflect::before {
  content: "";
  /*绝对定位，放置在容器的上方*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /*线性渐变，使反光区域从上到下透明度逐渐变化*/
  background: linear-gradient(to bottom,rgba(255,255,0),0.5));
  /*设置高度为字体大小的1.5倍*/
  height: 1.5em;
}

/*示例2：多行反光*/
.reflect {
  position: relative;
  overflow: hidden; /*溢出部分隐藏*/
}
.reflect::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom,0.5));
  height: 200%;
  transform: skewY(-12deg); /*斜切，模拟镜面效果*/
  transform-origin: left top; /*轴心点为左上角*/
}

/*示例3：图片反光*/
.reflect {
  position: relative;
  overflow: hidden;
}
.reflect::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  /*CSS3转换，水平翻转*/
  transform: scaleY(-1); 
  /*渐变背景不透明度，产生纯白色反射效果*/
  background: linear-gradient(to bottom,.5),0) 70%);
  height: 50%;
}

以上是几个常用的CSS反光镜效果实现代码示例，可以根据需求进行更改，为网页增添一份美观和互动性。