hexo yilia主题鼠标点击爱心效果设置_hexo 鼠標點擊效果: 愛心-程序员宅基地

技术标签: Hexo  

鼠标点击爱心效果

在themes\yilia\source文件夹下,新建click.js文件,代码:

! 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);

然后再themes\yilia\layout_partial文件夹下的after-footer.ejs中加入

</script>
<script type="text/javascript" src="<%=config.root%>./click.js">
</script>

hexo g,hexo d重新部署后就可看到效果

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43827595/article/details/100177617

智能推荐

Mysql的列式数据库infobright存储引擎_列式存储数据库选型-程序员宅基地

文章浏览阅读7.9k次。什么是infobright? Infobright是一个与MySQL集成的开源数据仓库软件,可作为MySQL的一个存储引擎来使用,SELECT查询与普通MySQL无区别。优点:Ø查询性能高 --比普通Mysql 数据库引擎(MyISAM、InnoDB) 快5-60倍.Ø存储数据量大 --能存储的数据量特别大.Ø高压缩比 --_列式存储数据库选型

学生党双十一蓝牙耳机选购指南,高颜值平价实用蓝牙耳机推荐_击音f1-程序员宅基地

文章浏览阅读179次。蓝牙耳机发展到现在算是达到了高峰,其中涌现的品牌产品不计其数。这就让很多消费者对蓝牙耳机的购买关注点发生了变化,从只认品牌到追求性价比了,而且现在许多平价蓝牙耳机的确是非常值得入手的。刚好双十一也快来临了,又到了购物狂欢节,所以小编就整理了一些性价比高且性能优异的蓝牙耳机,分享给各位。击音F1击音F1搭载了全新的蓝牙5.0芯片,在更高效稳定连接的同时,还将声音信号同时传达到左右耳单元,做到了更低延迟,可以听声辨位占据主动,配合着出众的AAC/SBC高清解码,优化还原了CD级音质,不管是听音乐还是_击音f1

如何定制丝网印刷电极-程序员宅基地

文章浏览阅读30次。丝网印刷电极(Screen-printed electrodes,SPE)是利用印刷技术将碳胶、银胶等各类不同胶材,以不同的设计图样印刷于不易溶解于水的基板/底板上而得到的电极。我们要再聊一下当市售电极无法满足实验需求是该如何定制化丝网印刷电极的。

【张兔兔送书第一期:考研必备书单】-程序员宅基地

文章浏览阅读4k次,点赞55次,收藏55次。八九月的朋友圈刮起了一股晒通知书潮,频频有大佬晒出“研究生入学通知书”,看着让人既羡慕又焦虑。果然应了那句老话——比你优秀的人,还比你努力。

链路追踪php,easyswoole链路追踪-程序员宅基地

文章浏览阅读543次。TrackerEasyswoole提供了一个基础的追踪组件,方便用户实现基础的服务器状态监控,与调用链记录。组件要求php: >=7.1.0ext-swoole: ^4.4.0easyswoole/component: ^2.0安装方法composer require easyswoole/tracker仓库地址调用链Easyswoole的调用链跟踪是一个以类似有序的树状链表的解构实现的,解..._php 链路追踪

【云计算概念】IaaS、PaaS、SaaS、CaaS、MaaS的区别-程序员宅基地

文章浏览阅读2.8k次,点赞2次,收藏3次。五者之间主要的区别在于第一个单词,而都是(即服务)的意思,这五者都是云计算的落地产品。

随便推点

Android 会议电话应用设计_android 三方通话无分离-程序员宅基地

文章浏览阅读1k次,点赞3次,收藏10次。背景以下内容基于Android P code。 并以三方通话为例。合并通话IMS先看下合并通话后Call、Connection的变化:合并通话后Call Connection的变更1. 合并通话后把新的ImsCallSession给了原来的foreground的ImsCall,原来的两个ImsCallSession都断开了。合并通话后ImsCallSession..._android 三方通话无分离

解决 Caused by: net.sf.jsqlparser.parser.ParseException: Encountered unexpected token:XXXXXXX_存储过程 encountered unexpected token: ")" ")-程序员宅基地

文章浏览阅读2.2k次。解决 Caused by: net.sf.jsqlparser.parser.ParseException: Encountered unexpected token:XXXXXXX_存储过程 encountered unexpected token: ")" ")

Android页面跳转动画简介_android 页面跳转动画-程序员宅基地

文章浏览阅读382次。在项目中常用到的页面跳转的方式主要有两种:1、通过在startActivity后执行overridePendingTransition方法进行动画的切换。overridePendingTransition(R.anim.left_in,R.anim.left_out); 其中第一个参数为activity进入时的效果,具体效果可以自己实现。left_in:xml versi_android 页面跳转动画

C++积累06_简单的学生成绩管理系统_1.题目要求 学生成绩管理系统 (1)增加记录:要求可以连续增加多条记录。 (2)查找:-程序员宅基地

文章浏览阅读604次。这个学生成绩管理系统是我一个高中哥们他们的假期作业,记得假期的时候我刚看到了这个的最终效果,大一上刚结束的我震惊了:原来控制台还能这么玩儿!题目描述(1) 增加记录:要求可以连续增加多条记录。(2) 查找:可以根据姓名(或学号)查找某个学生的课程成绩,查找某门课程成绩 处于指定分数段内的学生名单等等。可以实现模糊查询,即输入名字的一部 分,可以列出满足条件的所有记录。再从这个记录中进行二次选..._1.题目要求 学生成绩管理系统 (1)增加记录:要求可以连续增加多条记录。 (2)查找:

python 字符串中包含{}时,如何format_python 字符串里带{}怎么用format-程序员宅基地

文章浏览阅读1.3k次。字符串含有{}字符时,format方法_python 字符串里带{}怎么用format

insert into插入数据_insert into `tjgxck`.`inv_nova_inv_mininv` (`id`, -程序员宅基地

文章浏览阅读3.8k次。insert into 表名称 values(值1,值2,...) 可以指定所要插入数据的列:INSERT INTO table_name (列1, 列2,...) VALUES (值1, 值2,....)遇到了个自己都想不到的错误,我一定是没睡醒_insert into `tjgxck`.`inv_nova_inv_mininv` (`id`, `bizorgcode`, `createddate