JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="index.css">
  <audio src="http://ot7z7wqqo.bkt.clouddn.com/Star%20Wars%20Theme%20Song%20By%20John%20Williams.mp3" autoplay></audio>
  <title>Document</title>
</head>
<body>
    <div class="back">
        <div class="wrapper">
        <div class="gra"></div>
        <div class="text">
    
          <h1>Star War</h1>
          <p>
            In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.
    
      The lorem ipsum text is typically a scrambled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed to make it nonsensical, improper Latin.
      
      A variation of the nary lorem ipsum text has been used in typesetting since the 1960s or earlier, when it was popularized by advertisements for Letraset transfer sheets. It was introduced to the Information Age in the mid-1980s by Aldus Corporation, which employed it in graphics and word-processing templates for its desktop publishing program PageMaker.
             In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.
             In publishing and graphic design, loreller text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful...

CSS

.wrapper{
  position:absolute;
  text-align:center;
  transform: perspective(300px) rotateX(25deg) ;
  /* 摄像机z距离300px 目标物体x轴向下旋转25度 两者必须 */
  width:18em;
  height:50em;
  margin-left:-9em;
  font-size:350%;
  left:50%;
  bottom: 0;
  transform-origin:50% 100%;
  /* 摄像机的 x 与 y 轴的位置。 */
  overflow: hidden
}
.text{
  position:absolute;
  animation: scroll 100s linear 4s infinite;
  top:100%;
  color: #fff;
}

body{
  margin: 0;
  padding: 0;
  background: black;
}

.back{
  height: 100vh;
}

@keyframes scroll {
  0% {top:100%}
  100% {top:-200%}
}

.gra{
  position: absolute;
  height: 30em;
  width: 100%;
  background: linear-gradient(black 0, transparent 30em);
  z-index: 2;
}