从星战开头的特效到css的transform

<div class="star_container">
<div class="star_story">
<div>This article is about the media franchise. For the 1977 film, see Star Wars Episode IV: A New Hope. For other uses, see Star Wars (disambiguation).</div>
<div>The Star Wars logo, as seen in all filmsStar Wars is a space opera franchise conceived by George Lucas. The first film in the franchise was originally released on May 25, 1977, by 20th Century Fox, and became a worldwide pop culture phenomenon, spawning two immediate sequels, released at three-year intervals. Sixteen years after the release of the trilogy's final film, the first in a new prequel trilogy of films was released, again released at three-year intervals, with the final film released on May 19, 2005.</div>
<div>As of 2008, the overall box office revenue generated by the six Star Wars films has totalled approximately $4.3 billion, making it the third-highest-grossing film series,[1] behind only the James Bond and Harry Potter films.</div>
<div>The Star Wars film series has spawned other media including books, television series, video games, and comic books. These supplements to the film trilogies comprise the Star Wars Expanded Universe, and have resulted in significant development of the series' fictional universe. These media kept the franchise going in the interim between the film trilogies. In 2008, Star Wars: The Clone Wars was released to theaters as the first ever worldwide theatrical Star Wars film outside of the main trilogies. It was the franchise's first animated film, and was intended as an introduction to the Expanded Universe series of the same name, a 3D CGI animated series based on a previous 2D animated series of a similar name.</div>
</div>
</div>

body{
width: 100%;
height: 100%;
background-image: url("../img/bg.png");
}
/*
perspective值越大越远
*/
.container{
display: block;
width: 200px;
height: 200px;
margin-bottom: 50px;
border: 1px solid #bbb;
}
.box {
width: 100%;
height: 100%;
opacity: .75;
}
#darkblue {
margin:50px auto;
perspective:500px;
perspective-origin: 25% 75%;
}
#darkblue .box1 {
color: yellow;
font: 400 24px/2 "Microsoft Himalaya";
background-color: darkblue;
transform: rotateX(45deg);
}

.star_container{
position: relative;
margin: 0 auto;
width: 1000px;
height: 800px;
font-size: 350%;
transform-origin: 50% 100%;
transform: perspective(100px) rotateX(15deg);
border: 1px solid aqua;
color: yellow;
overflow: hidden;
}
.star_container .star_story{
position: absolute;
top:100%;
/*border: 1px solid red;*/
animation: scroll 100s linear infinite;
}

@keyframes scroll {
0% {
top: 100%;
}
100% {
top: -170%;
}
}