Fetching contributors…
Cannot retrieve contributors at this time
124 lines (116 sloc) 4.63 KB
layout: none
title: Project Star War
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Star Wars opening crawl</title>
<meta name="description" content="Star Wars opening crawl demo">
<link rel="icon" sizes="128x128" type="image/" href="/logo/favicon-128x128.ico"/>
<link rel="icon" sizes="64x64" type="image/" href="/logo/favicon-64x64.ico"/>
<link rel="icon" sizes="48x48" type="image/" href="/logo/favicon-48x48.ico"/>
<link rel="icon" sizes="32x32" type="image/" href="/logo/favicon-32x32.ico"/>
<link rel="icon" sizes="16x16" type="image/" href="/logo/favicon-16x16.ico"/>
<link rel="shortcut icon" type="image/" href="/favicon.ico">
<link rel="apple-touch-icon" href="/logo/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="/logo/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="/logo/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="/logo/touch-icon-ipad-retina.png">
<script src="//"></script>
html {
height: 100%;
body {
height: 100%;
padding: 0;
margin: 0;
font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
color: #ffda00;
font-size: 4em;
background-color: black;
perspective: 500;
-webkit-perspective: 500;
@media screen and (max-width: 300px){
font-size: 1em;
@media screen and (min-width: 300px)and (max-width: 400px){
font-size: 1.2em;
@media screen and (min-width: 400px) and (max-width: 650px){
font-size: 2em;
a {
color: #ffda00;
.center {
text-align: center;
.paper {
height: 100%;
width: 100%;
-webkit-transform: rotateX(60deg);
-moz-transform: rotateX(60deg);
transform: rotateX(60deg);
#content {
box-sizing: border-box;
margin: 0 auto;
width: 80%;
height: 100%;
overflow: hidden;
.empty-content {
box-sizing: border-box;
width: 100%;
height: 100%;
.bottom {
display: table;
.my-mine {
display: table-cell;
vertical-align: middle;
<script src=""></script>
<div class="paper">
<div id="content">
<div class="empty-content"></div>
<p class="center">A long time ago, in a galaxy far, far away...</p>
<h4 class="center">Episode IV</h4>
<h5 class="center">A NEW HOPE</h5>
<p class="center">It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>
<p class="center">During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon,the DEATH STAR,an armored space station with enough power to destroy an entire planet.</p>
<p class="center">Pursued by the Empire's sinister agents,Princess Leia races home aboard her starship,custodian of the stolen plans that can save her people and restore freedom galaxy....</p>
<div class="empty-content bottom">
<div class="my-mine">
<p class="center">May the Force be with You.</p>
<p class="center"><a href="/blog/2016/02/17/may-the-force-be-with-you.html">How I made it</a></p>
<p class="center">@<a href="">田小7777777</a></p>
var scrollHeight = $("#content")[0].scrollHeight;
$("#content").animate({scrollTop: scrollHeight}, scrollHeight * 20, "linear");