CSS文字倒影效果

纯 css 文字倒影样式，效果如下：

HTML 代码：

<h1 data-text="MYBJ123.com">
  MYBJ123.coM
</h1>

CSS 代码：

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');

body {
  margin:0;
  padding:0;
  background: radial-gradient(#900C3F, #581845);
  height: 100vh;
}

h1 {
  margin:0;
  padding:0;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  font-family: 'Roboto Slab', serif;
  text-transform: uppercase;
  color:#f1c40f;
  font-size: 8em;
}

h1:before {
  content: attr(data-text);
  position:absolute;
  top:0;
  left:0;
  transform-origin: bottom;
  transform: rotateX(180deg);
  line-height: 1em;
  background: linear-gradient(0deg, #f1c40f 0, transparent 80%);
  -webkit-background-clip: text;
  color: transparent;
  opacity: 0.6;
}

以上关于CSS文字倒影效果的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。