FeiNiMoShu_ShiJianXu
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>时间墟-时光不间断的消逝，留下的只有一堆看似'废墟'的角落，翻翻看却是一段段回忆！</title>

  <style>
    html,
    body {
      background-color: #0e0e0e;
      margin: 0;
      font-size: 12px;
      color: #4e9bf5;
      text-align: center;
    }

    @media screen and (max-width: 600px) {
      #clock {
        display: none;
      }
    }

    #clock {
      width: 350px;
      height: 200px;
      position: absolute;
      left: 100%;
      top: 89%;
      margin-left: -350px;
      margin-top: -120px;
    }

    .digit-group {
      display: inline-block;
      height: 190px;
    }

    .digit-group:not(:last-child):after {
      content: ':';
      font-size: 24px;
    }

    .digit {
      display: inline-block;
      width: 50px;
    }

    .digit div {
      color: rgba(255, 255, 255, 0.1);
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      -webkit-transition: font-size 250ms, -webkit-transform 500ms;
      transition: font-size 250ms, -webkit-transform 500ms;
      transition: font-size 250ms, transform 500ms;
      transition: font-size 250ms, transform 500ms, -webkit-transform 500ms;
    }

    .digit div.highlight {
      color: inherit;
      font-size: 24px;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  </style>
<link href="index.css" rel="stylesheet"></head>

<body>
  <div id="root"></div>
<script type="text/javascript" src="index.js"></script></body>

</html>