页面的head部分，需引入谷歌字体和swing.css样式文件，并通过JavaScript生成特定样式，代码如下：

<link href="https://fonts.googleapis.com/css?family=Nunito:400,700|Londrina+Outline|Londrina+Solid" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/swing.css" />
<script type="text/javascript">
    document.documentElement.className = "js";
    var supportsCssVars = function() {
        var e, t = document.createElement("style");
        return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e
    };
    supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
</script>

页面的body部分，在section标签里面放入需要反转的标题文字，代码如下：

<main>
  <section class="content content--layout" style="height:300px;">
    <h2 class="word word--swing">Quintain</h2>
  </section>
</main>

页面的底部，需引入jQuery库和2个JS文件，代码如下：

<script type="text/javascript" src="js/charming.min.js"></script> 
<script type="text/javascript" src="js/anime.min.js"></script> 
<script type="text/javascript" src="js/demo.js"></script>