网站字体跳动

发布于 2022-03-27  610 次阅读


本文最后更新于2022年5月1日,已超过 30 天没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

游览的话,直接看本网站即可。

首先下载 文件上传到你的服务器中 下载: https://pan.cbbkk.com/beattext.rar

然后把下面 代码 添加到 主题 footer.php 最底部 </head> 上 即可

<script type="text/javascript" src="/wp-content/themes/Sakura/beattext/jquery.beattext.js"></script>
<script type="text/javascript" src="/wp-content/themes/Sakura/beattext/easying.js"></script>
<script type="text/javascript">
 
$(document).ready(function() {
/*
 *  参数详解:
 * upTime          上移的时间
 * downTime        下落的时间
 * beatHeight      上移高度
 * isAuth          是否自动
 * isRotate        是否旋转
*/
$('h1 p, h2 p, h3 p, h4 p, h5 p, h6 p,h1,h2,h3,h4,h5,h6,p,.notice-content,#pagination a,.entry-content p').beatText({isAuth:false,isRotate:false});
$('p#rotateText').beatText({isAuth:false,isRotate:true});
$('p#autoText').beatText({isAuth:true,beatHeight:"3em",isRotate:false});
$('p#roloadText').beatText({isAuth:true,beatHeight:"1em",isRotate:false,upTime:100,downTime:100});
$('p#autoRotateText').beatText({isAuth:true,upTime:700,downTime:700,beatHeight:"3em",isRotate:true});
 
});
  
</script>

修改上面的文件链接网址,想要那个标签跳动,直接在第 14 行 括弧中 根据格式 添加标签。

最后,在你主题的 style.css 文件中添加下面CSS 代码

/*字体跳动*/

.beat-char {
    line-height: 0.8em;
    position: relative;
    display: inline-block;
    background: transparent;
 
}
 
.rotate{
    transform:rotate(360deg) ;
    -ms-transform:rotate(360deg);  /* IE 9 */
    -moz-transform:rotate(360deg);     /* Firefox */
    -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
    -o-transform:rotate(360deg);
    -webkit-transition-duration: 0.7s;
 
}

完成,刷新后可以去测试效果

发现返回首页只剩下 P 标签才能跳动,想一直跳动只能关闭 pjax