突发标题

在我最近观看的一部电影预告片中，有一则关于奥普拉的广告。 我没有注意，因为我正试图拿出手机拍一张照片。 我没有成功。 有一些很酷的标题屏幕，我认为用 CSS 重新创建它们会很有趣。 它们看起来像……好吧，它们看起来像这样

事实证明，你可以用语义的方式做到这一点。 只是一个带有锚链接的标题标签。 诚然，如果只用标题标签来做会很酷，但我找不到一种方法可以在没有额外元素的情况下将层叠放好，并使文字位于顶部。

<h1><a href="#0">CSS-Tricks</a></h1>

h1 { 
  text-align: center;
  color: white;
  text-transform: uppercase;
  padding: 1px;
  font-family: 'Raleway', cursive;
  font-weight: 100;
  position: relative;
  background: linear-gradient(to right, black, #eee, black);
}
h1::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -50px;
  width: 600px;
  margin-left: -300px;
  margin-top: -220px;
  height: 600px;
  background: radial-gradient(50% 50%, ellipse closest-side, #444, black);
  z-index: -1;
}
h1 a {
  background: black;
  display: block;
  padding: 20px;
  text-decoration: none;
  letter-spacing: 30px;
  color: white;
}

我在此列出了所有供应商前缀，因为在“实际”使用中需要使用它们，我担心人们会复制粘贴伪代码。 但是，如果你想玩玩这个，不想处理所有这些，Dabblet 演示 不需要它们，因为它使用 Prefix Free。

我还为演示添加了一些动画，只是为了好玩。