hugo 博客 监听鼠标点击事件，添加动画效果

js下载

链接：https://pan.baidu.com/s/1SZu76WdEXRxLCfqJ2lbbtQ 密码：r056

移入hugo博客中

打开路径下 themes/maupassant/layouts/_default/baseof.html 文件，添加成以下代码

这里的js路径需要根据自己的实际需要引入，我的是放在themes/maupassant/static/js/anime.min.js目录下

有时候会找不到js，是因为config.toml中baseURL不是根域名，如果有后缀的话，需要像下面一样，加上前缀

<!-------------------------------------新增 - start------------------------------->

<style type="text/css">

	.fireworks {

		position: fixed;

		pointer-events: none;

		top: 0;

		left: 0;

		height: 100%;

	}

</style>

<canvas class="fireworks"></canvas>

<script src="/hugo-blog/js/anime.min.js"></script>

<script src="/hugo-blog/js/fireworks.js"></script>

<script type="text/javascript">

  fireworks.setCanvasSize();

</script>

<!-------------------------------------新增 - end------------------------------->

<!doctype html>

<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}zh-CN{{end}}">

{{ partial "head" . }}

<body>

    {{ partial "header" . }}

        <div id="body">

            <div class="container">

                <div class="col-group">

                    <div class="col-8" id="main">

                        {{ block "content" . }}{{ end }}

                    </div>

                    {{ partial "sidebar" . }}

                </div>

            </div>

        </div>

    {{ partial "footer" . }}

</body>

</html>

修改样式

这里我对firework.js进行了修改，主要是显示的时间长短问题，具体位置如下

可以根据自己的需要自己修改

 function animateParticules(x, y) {

    var circle = createCircle(x, y);

    var particules = [];

    for (var i = 0; i < numberOfParticules; i++) {

      particules.push(createParticule(x, y));

    }

    anime.timeline().add({

      targets: particules,

      x: function(p) { return p.endPos.x; },

      y: function(p) { return p.endPos.y; },

      radius: 0.1,

      // -------------------------圆球消失的速度为 1900ms - 2400ms

      duration: anime.random(1900, 2400),

      easing: 'easeOutExpo',

      update: renderParticule

    })

    .add({

      targets: circle,

      radius: anime.random(180, 160),

      lineWidth: 0,

      alpha: {

        value: 0,

        easing: 'linear',

        duration: anime.random(800, 1000),

      },

      // -------------------------圆线消失的速度为 1900ms - 2400ms

      duration: anime.random(1900, 2400),

      easing: 'easeOutExpo',

      update: renderParticule,

      offset: 0

    }).add({

      targets: circle,

      radius: anime.random(180, 160),

      lineWidth: 0,

      alpha: {

        value: 0,

        easing: 'linear',

        duration: anime.random(800, 1000),

      },

      // -------------------------第二层圆线消失的速度为 2200ns - 2800ms

      duration: anime.random(2200, 2800),

      easing: 'easeOutExpo',

      update: renderParticule,

      offset: 0

    });

  }

【hugo】- hugo 博客 添加鼠标单击特效的更多相关文章

  1. 给 hugo 博客添加搜索功能

    起因 我的博客使用了 hugo 作为静态生成工具,自带的主题里也没有附带搜索功能.看来,还是得自己给博客添加一个搜索功能. 经过多方查找,从 Hugo Fast Search · GitHub 找到一 ...

  2. Note | 用Hugo搭建博客并部署到GitHub Pages

    目录 1. 本地搭建 1.1 安装Hugo 1.2 创建站点 1.3 新建页面和文章 1.4 使用主题 1.5 修改配置文件 1.6 预览 2. 部署 之前担心过现有博客平台(如博客园,CSDN)突然 ...

  3. 用hugo建博客的记录 · 老张不服老

    前后累计折腾近6个小时,总算把搭建hugo静态博客的整个过程搞清楚了.为什么用了这么久?主要还是想偷懒,不喜欢读英文说明.那就用中文记录一下过程吧.还是中文顺眼啊. 某日发现自己有展示些东西给外网的需 ...

  4. 如何用hugo 搭建博客

    1,Hugo 简介 搭建个人博客有很多开源的博客框架,我们要介绍的框架叫作Hugo.Hugo 是一个基于Go 语言的框架,可以快速方便的创建自己的博客. Hugo 支持Markdown 语法,我们可以 ...

  5. 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)

    备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...

  6. hexo next主题为博客添加分享功能

    title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 ...

  7. CSDN博客添加量子恒道统计代码步骤

    CSDN博客添加量子恒道统计代码步骤. 1. 去量子恒道网站统计 注册账户: 2. 添加已有的CSDN博客地址: 3. 添加博客后恒道代码里面会给你一个JavaScript脚本,记下里面的一串数字: ...

  8. 为你的WordPress博客添加CSS3炫酷读者墙

    为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...

  9. Jekyll博客添加Valine评论

    Jekyll博客添加Valine评论 关于github搭建jekyl博客,在这里不做过多描述,详情参考: 百度搜索关键字:github搭建jekyll博客 官网:https://www.jekyll. ...

随机推荐

  1. 开源大屏工具 DataGear 的使用

    记录一款好用的大屏工具,DataGear,官方标记为"开源免费的数据可视化分析平台". 其支持的数据集可以为SQL或HTTP API等,SQL支持MySQL等关系型数据库及Hive ...

  2. 【数据结构与算法】——链表（Linked List）

    链表(Linked List)介绍 链表是有序的列表,但是它在内存中是存储如下: 链表是以节点的方式来存储的,是链式存储. 每个节点包含data域,next域:指向下一个节点. 如图:链表的各个节点不 ...

  3. java注解基础入门

    前言 这篇博客主要是对java注解相关的知识进行入门级的讲解,包括**,核心内容主要体现在对java注解的理解以及如何使用.希望通过写这篇博客的过程中让自己对java注解有更深入的理解,在工作中可以巧 ...

  4. 痞子衡嵌入式：盘点国内MCU级RISC-V内核IP厂商

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是国内MCU级RISC-V内核IP厂商. 自RISC-V指令集2010年诞生以来,业界普遍认为,RISC-V将会改变现有的由Arm和Int ...

  5. LayUi表单模块无法正常显示

    问题: 当我们再使用LayUI的Form表单模块时,我们会把自己需要的表单赋值到我们的页面中,但是会出现无法正常显示的问题,如下: 出现原因: LayUI官方文档也明确表示:"当你使用表单时 ...

  6. windows 以管理员身份运行 代码

    1 // 以管理员身份运行本进程 2 // 1 获取本进程的文件路径. 3 TCHAR path[MAX_PATH] = { 0 }; // 需要初始化 4 DWORD dwPathSize = MA ...

  7. Python基础之数据类型详解

    为什么会有数据类型? 在介绍具体的数据类型之前,需要了解为什么需要区分数据类型.我们知道,一个公司会有很多个大的部门,每个部门下又会有许多细分的小部门,构成了公司的完整体系结构.如果把python的数 ...

  8. 计算机体系结构——CH3存储系统

    计算机体系结构--CH3存储系统 右键点击查看图像,查看清晰图像 X-mind 计算机体系结构--CH3存储系统 存储系统原理 主要性能 速度 容量 价格 两种存储系统 Cache与主存储器 虚拟存储 ...

  9. （5）MySQL进阶篇SQL优化（优化数据库对象）

    1.概述 在数据库设计过程中,用户可能会经常遇到这种问题:是否应该把所有表都按照第三范式来设计?表里面的字段到底改设置为多大长度合适?这些问题虽然很小,但是如果设计不当则可能会给将来的应用带来很多的性 ...

  10. OLAP引擎：基于Presto组件进行跨数据源分析

    一.Presto概述 1.Presto简介 Presto是一个开源的分布式SQL查询引擎,适用于交互式分析查询,数据量支持GB到PB字节,Presto虽然具备解析SQL的能力,但它并不属于标准的数据库 ...