超炫酷的鼠标悬停文字动态反转效果

一款超炫酷的鼠标悬停文字动态反转效果，鼠标悬停在每一个字符上面时，会有一个文字围绕底部360度动态反转的特效，旋转的同时有一个文字镂空描边的效果。反转完成时有一个简单烟花的特效。

分类：文字特效 > 文字动画难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的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>