查看效果

实现:
1.下载这段js代码到项目目录 ===》下载地址
2.在需要的地方添加js代码

<script type="text/javascript" src="js文件目录"></script>
  • cnblog增加点击红心特效
    设置 ==》页脚HTML代码 ==》添加js代码到最后一行
    ps:有cdn的可以把js文件放到cdn,链接到cnblog,没有的直接复制js代码到cnblog设置处,如下:

    <script>
    !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
    </script>
  • next主题设置点击红心特效
    layout ==》 _partials ==》footer.swig文件修改增加script如上操作

Hexo NexT主题/cnblog等博客增加点击出现红心的特效的更多相关文章

  1. Hexo搭建 github.io 静态博客使用指南

    What? Hexo 是一个快速.简洁且高效的博客框架.可以使用markdown 解析成文章,在几秒内,即可利用靓丽的主题生成静态网页. Why? 笔记需要整理 How? github 创建 char ...

  2. 使用hexo和coding建立静态博客站点

    背景 由于工作性质的原因,做技术的总想记录和分享一下自己的学习和成长历程,向这世界证明我来过.写文章,发博客,一开始使用51cto,广告太多,看起来让人很痛苦:接着试用了博客园,广告少一些,但感觉还是 ...

  3. 使用hexo搭建属于自己的博客

    如果你喜欢拥有自己的博客域名,如果你喜欢折腾,可以先点击luckykun.com,看看效果,再选择要不要进来看看--- 之前一直都在博客园写博客,不过最近在逛园子的时候不小心看到了hexo,简直有种相 ...

  4. 使用hexo+github搭建免费个人博客详细教程

    [TOC] 本文目录(注意无法点击): 前言 体验更加排版请访问原文链接:http://blog.liuxianan.com/build-blog-website-by-hexo-github.htm ...

  5. 利用Github和Hexo搭建独立的个人博客--基础篇

    利用Github和Hexo搭建独立的个人博客--基础篇 摘要:本文主要参考了使用hexo和Github上创建自己的博客.如何搭建一个独立博客--简明Github Pages与Hexo教程和使用GitH ...

  6. 利用hexo+github+nodejs搭建自我博客的一天

    放一张比较喜欢的背景图镇楼,伪文艺一波.因为刚刚抱着四个快递从公司大门走到宿舍,快递都比我高,坐电梯的时候电梯里面的灯一闪一闪,电梯还摇晃,上演了一波鬼吹灯,惊魂未定... 说正题:我喜欢的博客应该是 ...

  7. 用 Hexo + Github 搭建自己的博客

    扯在前面 在很久很久以前,一直就想搭建属于自己的一个博客,但由于各种原因,最终都不了了之,恰好最近突然有了兴趣,于是就自己参照网上的教程,搭建了属于自己的博客. 至于为什么要搭建自己的博客了?哈哈,大 ...

  8. 基于 Hexo + GitHub Pages 搭建个人博客(一)

    前言:我的博客写作之路 15 年刚上大学,第一次接触公众号,就萌生了创建一个公众号写点东西,但最终不了了之. 很快到了 16 年,开始接触网上各大博客网站,接触最多的当属 CSDN,萌生了注册一个博客 ...

  9. 基于 Hexo + GitHub Pages 搭建个人博客(二)

    在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...

随机推荐

  1. Maven&&Philosophy~

    What is Maven? At first glance Maven can appear to be many things, but in a nutshell Maven is an att ...

  2. PAT乙级考前总结(五)

    字符串处理 1003 我要通过! (20 分) “答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于 PAT 的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否 ...

  3. MHA-Atlas-MySQL高可用集群2

    MHA脚本管理方式 (1)获取管理脚本master_ip_failover 提示:yum安装的manager是没有这个脚本的. 我们需要从manager的源码包里复制一个.   [root@mysql ...

  4. zoj 2524 并查集裸

    Description There are so many different religions in the world today that it is difficult to keep tr ...

  5. 每个月总有那么几天!!!!XML解析

    1. 介绍 1)DOM(JAXP Crimson解析器)         DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信息片断的集合.这个层次结构允许 ...

  6. Arch Linux 硬盘引导-联网安装

    Arch Linux 硬盘引导-联网安装 ============https://www.archlinux.org/https://wiki.archlinux.org/https://wiki.a ...

  7. 个性化自己的DOS窗口

    就是为了好看吧,感觉没啥大用 ============= 首先创建一个文本,写下如下命令 @echo off color D echo ======================== echo == ...

  8. antd-vue按需加载插件babel-plugin-import报错

    报错.bezierEasingMixin().百度了一下是Less版本太高的原因,我都迷了,还有太新的过... 解决方法:将less版本降到3.0以下 因为我是用的npm生成的vue项目.所以cmd命 ...

  9. 洛古 P2568 莫比乌斯+暴力

    #include<bits/stdc++.h> #define LL long long using namespace std; ; bool vis[maxn]; int prime[ ...

  10. 联想拯救者r720+固态浦科特M8PeGN 的bios 设置

    最近笔记本左边的两个usb3.0接口都坏了,win10 报错usb端口上的电涌 真是一脸蒙B! 然后去打售后电话,说昌平没有售后,需要去海淀黄庄去维修,然后下午就去了那里,维修的人员说硬件坏了,需要1 ...