JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<html lang="zh-cn" style="font-size: 41.4px;">

  <head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <title>神奇动物在哪里</title>
    <meta name="apple-mobile-web-app-title" content="神奇动物在哪里">
    <meta name="format-detection" content="telephone=no,email=no,address=no">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="keywords" content="honor details">
    <meta name="description" content="the details of user's honor">
  </head>

  <body>
    <div class="container">
      <div class="header">
        <i class="honor-icon" style="transform: scale(1.104);"></i>
        <div class="honor-icon-info">
          <p class="honor-icon-name">仿佛有痛楚</p>
          <p class="honor-val">战力+100</p>
        </div>
      </div>
      <div class="honor-des-con">
        <div class="title-con">
          <i class="title-icon title-l"></i>
          <span class="title">歌尽桃花扇底风</span>
          <i class="title-icon title-r"></i>
        </div>
        <p class="description"><span class="user-name">"七月羽歌"</span>烟花飞腾的时候，火焰掉入海中。遗忘就和记得一样，是送给彼此最好的纪念。爱从来都不是归宿，也不是彼此的救赎。</p>
      </div>
    </div>
  </body>

</html>

CSS

body,
div,
p {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 20px;
}

body {
  font-size: .7rem;
  background: #fff !important;
}

.container {
  width: 10rem;
  overflow-x: hidden;
  font-size: .4rem;
  color: #999;
  -webkit-overflow-scrolling: touch;
}

.header {
  width: 10rem;
  height: 10.533rem;
  margin: 0 auto;
  padding-top: 2.4rem;
  font-size: .373rem;
  color: #fff;
  text-align: center;
  background: url("https://qiniu.qiubg.com/honor-detail.png") no-repeat center center;
  background-size: 100% 100%;
  position: relative;
}

.honor-icon {
  display: block;
  width: 300px;
  height: 160px;
  margin: 0 auto;
  background: url("https://qiniu.qiubg.com/honor-animation.png") 0 0 no-repeat;
  background-size: 6000px 160px;
  -moz-background-size: 6000px 160px;
  -webkit-background-size: 6000px 160px;
  -o-background-size: 6000px 160px;
  animation: run 3s steps(19) infinite;
}

@-moz-keyframes run {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -5700px 0;
  }
}

@-webkit-keyframes run {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -5700px 0;
  }
}

@-o-keyframes run {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -5700px 0;
  }
}

@keyframes run {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -5700px 0;
  }
}

.honor-icon-info {
  width: 100%;
  position: absolute;
  bottom: 1.1rem;
}

.honor-icon-name {
  font-size: .64rem;
  color: #d39949;
  /*margin-top: .58rem;*/
}

.honor-val {
  margin: .15rem 0;
}

.honor-des-con {
  width: 100%;
  text-align: center;
  padding: .5rem 1rem;
}

.title-con {
  margin-bottom: .8rem;
  font-family: PingFang-SC-Heavy;
  font-size: .533rem;
  line-height: .533rem;
}

.title-icon {
  display: inline-block;
  width: .267rem;
  height:...

JavaScript

(self.window !== top.window) && (top.window.location.href = self.window.location.href), ! function(a) {
  function b() {
    var a = e.getBoundingClientRect().width,
      b = a / 10;
    e.style.fontSize = b + "px";
    try {
      "function" == typeof eval("init") && init()
    } catch (e) {}
  }
  var c, d = a.document,
    e = d.documentElement;
  a.addEventListener("resize", function() {
    clearTimeout(c), c = setTimeout(b, 300)
  }, !1), b()
}(window);