页面的head部分，需设置好页面元素的样式，并引入一个JS插件，代码如下：

<style type="text/css">
html {
  background-color:#fff;
  color:#32353a;
  font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  line-height:1.5;
}

body {
  margin:0;
}

h1 {
  font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  font-size:2.2em;
  font-weight: 500;
}

.counter {
  margin-bottom:1rem;
  border-bottom:.1875em dashed #d2d6dd;
}

.tagline {
  font-size:1.125em;
  margin:2rem 1.5rem;
}

.calories {
  color:#8b919b;
  font-size:.875em;
}

.splash {
  position: relative;
  height:100vh;
  max-width:30em;
  text-align:center;
}

.splash {
  box-sizing:border-box;
  max-width:30em;
  margin:0 auto;
  padding:1.5em;
}

.counter {
  position:relative;
  padding-top:30vh;
  padding-bottom:1vh;
}

.counter h1 {
  position:relative;
  text-align:center;
  margin:0;
  line-height: .625;
  z-index:2;
  transform-origin: bottom center;
}

.dish {
  color:#e89c2b;
  position:absolute;
  width:1em;
  height:1em;
  margin-top:-.75em;
  margin-left:-.5em;
  font-size:2rem;
  top:0;
  transform:translateY(-3em);
  transition-duration:.75s;
  transition-timing-function:ease-in;
  transition-property:transform;
  z-index:1;
}

.dish.drop {
  transform:translateY(30vh);
}

.nommer {
  position:absolute;
  bottom:2em;
  margin-left:-1em;
  color:rgba(0,0,0,.5);
  font-size:1.5rem;
  transform-origin:bottom center;
}
</style>
<script type="text/javascript" src="js/fitty.min.js"></script>

页面的body部分，设置好页面初始化时的显示文字即可，代码如下：

<div class="splash">
  <div class="counter">
    <div><h1>饿了吗？开饭！</h1></div>
  </div>
  <p class="tagline">自由增删美食和随机评价</p>
  <p class="calories">轻量级，超简易</p>
</div>

页面的底部，通过javascript来设置图标掉落、字体变大等事件的响应，代码如下：

<script type="text/javascript">
//美食雨
(function(){
  var counter = document.querySelector('.counter');
  var diner = document.querySelector('h1');
  var menu = ['