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;
}