[分享]css3文字倒影效果样式

CSS3文字倒影效果样式是一种可以让文字在页面上呈现出倒影效果的CSS3样式。通过使用CSS3的transform和gradient属性，可以实现出这种效果。/ 设置文字倒影 / .textrefle...

CSS3文字倒影效果样式是一种可以让文字在页面上呈现出倒影效果的CSS3样式。通过使用CSS3的transform和gradient属性，可以实现出这种效果。

/* 设置文字倒影 */
.text-reflect {
  position: relative; /* 相对定位 */
  display: inline-block; /* 内联块级元素，使文字和倒影在同一行 */
}
.text-reflect::after {
  content: ""; /* 伪元素内容为空 */
  position: absolute; /* 绝对定位 */
  top: calc(100% + 5px); /* 让倒影与文字不重叠 */
  left: 0; /* 倒影位置与文字一致 */
  width: 100%; /* 倒影宽度与文字一致 */
  height: 50%; /* 倒影高度为文字高度的一半 */
  transform: scaleY(-1); /* 沿Y轴翻转倒影，使其上下颠倒 */
  opacity: 0.5; /* 设置倒影透明度 */
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* 设置倒影背景为线性渐变 */
}

/* 可以设置在任何需要倒影效果的元素上 */
.reflect {
  font-size: 40px;
  color: #333;
} 

通过添加text-reflect类，我们可以给需要倒影效果的文字添加倒影样式。同时，也可以设置倒影的透明度和背景颜色等属性来达到不同的效果。