给博客右下角添加一个弹簧人物

397次阅读
2条评论

共计 610 个字符,预计需要花费 2 分钟才能阅读完成。

由于时不时会有人问本博客右下角人物如何添加,这里还是稍微介绍一下。其实这是一个开源的项目,开源项目地址:sakana

使用起来也非常简单,如果使用的是 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>

以上是本博客使用到的参数,由于弹簧弹跳太快限制了一下,不然晃眼睛。此外需要注意的是,如果弹簧人物加载缓慢,可以将 js 文件下载到本地。

嘘,点击底座还可以切换人物哦!

AD:【腾讯云服务器大降价】2核4G 222元/3年 1核2G 38元/年
正文完
 
阿蛮君
版权声明:本站原创文章,由 阿蛮君 2024-05-31发表,共计610字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(2条评论)
john 评论达人 LV.1
2024-06-04 16:50:36 回复

保姆级别的教程 :beer:

 Windows  Chrome  中国湖南省郴州市电信
    阿蛮君 博主
    2024-06-04 16:52:04 回复

    @john 哈哈哈,主要是简单 :smile:

     Windows  Edge  中国广东省广州市电信
Copyright © 2022-2024 阿蛮君博客 湘ICP备2023001393号
本网站由 亿信互联 提供云计算服务 | 蓝易云CDN 提供安全防护和加速服务
Powered by Wordpress  Theme by Puock