为WordPress右下角注入活力:增添弹簧人物
由于在日常的使用过程中,时不时就会有访客询问本博客右下角那个可爱的人物是如何添加的,鉴于此,在这里还是为大家详细地稍微介绍一下具体的操作方法吧。其实呢,这个出现在博客右下角的人物是来自一个开源的项目哦。这个开源项目有着诸多的优点,使用起来真的是非常简单便捷。如果正在阅读的你使用的是广受欢迎的 WordPress 平台,那么你可以按照以下步骤进行操作。
代码部署
首先,找到主题编辑器,然后在 footer.php 这个文件当中添加如下代码即可。这样一来,你就可以轻松地为自己的博客也添加一个如此独特而有趣的人物元素啦。
<div class="sakana-box"></div>
<script src="https://cdn.jsdelivr.net/npm/sakana"></script>
<script>
// 启动
const sakana = Sakana.init({
el: '.sakana-box', // 启动元素 node 或 选择器
scale: .5, // 缩放倍数
canSwitchCharacter: true, // 允许换角色
inertia: 0.01, // 惯性
decay: 0.97, // 衰减
r: -20, // 启动角度
y: 10, // 启动高度
scale: 0.5, // 缩放倍数
translateY: 0, // 位移高度
});
</script>
<style>
html .sakana-box{
z-index: 80;
position: fixed;
right: 0;
bottom: 0;
transform-origin: 100% 100%; /* 从右下开始变换 */
}
</style>
效果展示
阅读剩余
提示:本文最后更新于2024年10月29日,如有错误或者已经失效,请留言告知。
THE END