0x00

handsome主题是基于Typecho博客框架打造的一款强大的付费主题


0x01 Mac风格代码高亮

0x02 底部页脚标签样式

  1. 将以下添加至自定义CSS
/*底部页脚*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}
CSS
  1. 将以下内容添加至博客底部左侧信息,将内容改成自己的
<div class="github-badge">

<a href="./" title="©2019&nbsp;Alvin">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019&nbsp;Alvin</span>
</a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
<a href="http://www.miitbeian.gov.cn/" target="_blank" title="粤ICP备 xxx号" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">粤ICP备</span><span class="badge-value bg-green">xxx号</span>
</a>
</div>

HTML
  1. 将以下内容添加至博客底部右侧信息
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>

POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE);

JavaScript

0x05 博主介绍闪字特效

添加代码至博主的介绍

<!--博主介绍的闪字特效-->

document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处!',showConfirmButton: false,timer: 2000});};

JavaScript

0x07 文章底部赞赏图标跳动

添加代码至自定义css

/赞赏图标跳动/
.btn-pay {

<span class="token property">animation</span><span class="token punctuation">:</span> star 0.5s ease-in-out infinite alternate<span class="token punctuation">;</span>

}

@keyframes star {

<span class="token selector">from</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">to</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

CSS

0x07 彩色标签云

添加至自定义js

let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {

tagsColor <span class="token operator">=</span> colorArr<span class="token punctuation">[</span><span class="token object">Math</span><span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token object">Math</span><span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> colorArr<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
tag<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> tagsColor<span class="token punctuation">;</span>

});

JavaScript

如果主题中启用了pjax,还需要将上面代码添加到pjax-pjax回调函数中

0x08 首页文章列表悬停上浮

添加至自定义CSS

.blog-post .panel:not(article) {

<span class="token property">transition</span><span class="token punctuation">:</span> all 0.3s<span class="token punctuation">;</span>

}

.blog-post .panel:not(article):hover {

<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-10px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 8px 10px <span class="token function">rgba</span><span class="token punctuation">(</span>73, 90, 47, 0.47<span class="token punctuation">)</span><span class="token punctuation">;</span>

}

CSS

0x09 首页文章列表头图悬停放大并将超出范围隐藏

添加至自定义CSS

.index-post-img {

<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>

}

.item-thumb {

<span class="token property">transition</span><span class="token punctuation">:</span> all 0.3s<span class="token punctuation">;</span>

}

.item-thumb:hover {

<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.1<span class="token punctuation">)</span>

}

CSS

0x10 文章内头图和文章图片悬停放大并将超出范围隐藏

添加代码至自定义CSS

.entry-thumbnail {

<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>

}

#post-content img {

<span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> 0.5s<span class="token punctuation">;</span>

}

#post-content img:hover {

<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.05<span class="token punctuation">)</span><span class="token punctuation">;</span>

}

CSS

0x11 使用qq头像

https://q1.qlogo.cn/g?b=qq&;nk=1033853263&s=640
改为自己的qq号即可

0x12 Markdown 编辑器 Editor.md for Typecho

0x13 LoveKKComment-Typecho评论邮件提醒插件

0x14 更换网站光标

添加css代码:

/ 鼠标样式 开始/
/ 普通指针样式/
body {
cursor: url(https://rehtt.com/css/光标/S1.cur), default;
}
/ 链接指针样式/
a:hover{cursor:url(https://rehtt.com/css/光标/S2.cur), pointer;}
/ 鼠标样式 结束/
CSS

光标文件:
指针
链接指针

0x15 鼠标点击特效


js代码:

代码中包含了sketch.min.js的源码,如果你的网站已经引用了,请删掉下面的6到7行。

/*

*/

/ Copyright (C) 2013 Justin Windle sketch.min.js, http://soulwire.co.uk /

//---
if(document.getElementById("clickCanvas")) {

<span class="token keyword">function</span> <span class="token function">Particle</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> radius<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> radius<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
Particle<span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token punctuation">{</span>
    init <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> radius<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>alive <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>radius <span class="token operator">=</span> radius <span class="token operator">||</span> <span class="token number">10</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>wander <span class="token operator">=</span> <span class="token number">0.15</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>theta <span class="token operator">=</span> <span class="token function">random</span><span class="token punctuation">(</span><span class="token constant">TWO_PI</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>drag <span class="token operator">=</span> <span class="token number">0.92</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'#ffeb3b'</span><span class="token punctuation">;</span>

        <span class="token keyword">this</span><span class="token punctuation">.</span>x <span class="token operator">=</span> x <span class="token operator">||</span> <span class="token number">0.0</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>y <span class="token operator">=</span> y <span class="token operator">||</span> <span class="token number">0.0</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>vx <span class="token operator">=</span> <span class="token number">0.0</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>vy <span class="token operator">=</span> <span class="token number">0.0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    move <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>x <span class="token operator">+=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vx<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>y <span class="token operator">+=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vy<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>vx <span class="token operator">*=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>drag<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>vy <span class="token operator">*=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>drag<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>theta <span class="token operator">+=</span> <span class="token function">random</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>wander<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>vx <span class="token operator">+=</span> <span class="token function">sin</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>theta<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">0.1</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>vy <span class="token operator">+=</span> <span class="token function">cos</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>theta<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">0.1</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>radius <span class="token operator">*=</span> <span class="token number">0.96</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>alive <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>radius <span class="token operator">&gt;</span> <span class="token number">0.5</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    draw <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>ctx<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        ctx<span class="token punctuation">.</span><span class="token function">beginPath</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        ctx<span class="token punctuation">.</span><span class="token function">arc</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>x<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>y<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>radius<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token constant">TWO_PI</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">;</span>
        ctx<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token constant">MAX_PARTICLES</span> <span class="token operator">=</span> <span class="token number">50</span><span class="token punctuation">;</span>
<span class="token comment">//圆点颜色库</span>
<span class="token keyword">var</span> <span class="token constant">COLOURS</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">"#5ee4ff"</span><span class="token punctuation">,</span> <span class="token string">"#f44033"</span><span class="token punctuation">,</span> <span class="token string">"#ffeb3b"</span><span class="token punctuation">,</span> <span class="token string">"#F38630"</span><span class="token punctuation">,</span> <span class="token string">"#FA6900"</span><span class="token punctuation">,</span> <span class="token string">"#f403e8"</span><span class="token punctuation">,</span> <span class="token string">"#F9D423"</span> <span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> particles <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> pool <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> clickparticle <span class="token operator">=</span> Sketch<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    container <span class="token punctuation">:</span> <span class="token object">document</span><span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'clickCanvas'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
clickparticle<span class="token punctuation">.</span><span class="token function-variable function">spawn</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>particles<span class="token punctuation">.</span>length <span class="token operator">&gt;=</span> <span class="token constant">MAX_PARTICLES</span><span class="token punctuation">)</span>
        pool<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>particles<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    particle <span class="token operator">=</span> pool<span class="token punctuation">.</span>length <span class="token operator">?</span> pool<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Particle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    particle<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> <span class="token function">random</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//圆点大小范围</span>
    particle<span class="token punctuation">.</span>wander <span class="token operator">=</span> <span class="token function">random</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">2.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    particle<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token function">random</span><span class="token punctuation">(</span><span class="token constant">COLOURS</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    particle<span class="token punctuation">.</span>drag <span class="token operator">=</span> <span class="token function">random</span><span class="token punctuation">(</span><span class="token number">0.9</span><span class="token punctuation">,</span> <span class="token number">0.99</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    theta <span class="token operator">=</span> <span class="token function">random</span><span class="token punctuation">(</span><span class="token constant">TWO_PI</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    force <span class="token operator">=</span> <span class="token function">random</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    particle<span class="token punctuation">.</span>vx <span class="token operator">=</span> <span class="token function">sin</span><span class="token punctuation">(</span>theta<span class="token punctuation">)</span> <span class="token operator">*</span> force<span class="token punctuation">;</span>
    particle<span class="token punctuation">.</span>vy <span class="token operator">=</span> <span class="token function">cos</span><span class="token punctuation">(</span>theta<span class="token punctuation">)</span> <span class="token operator">*</span> force<span class="token punctuation">;</span>
    particles<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>particle<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
clickparticle<span class="token punctuation">.</span><span class="token function-variable function">update</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> i<span class="token punctuation">,</span> particle<span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> particles<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&gt;=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        particle <span class="token operator">=</span> particles<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>particle<span class="token punctuation">.</span>alive<span class="token punctuation">)</span>
            particle<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">else</span>
            pool<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>particles<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
clickparticle<span class="token punctuation">.</span><span class="token function-variable function">draw</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    clickparticle<span class="token punctuation">.</span>globalCompositeOperation <span class="token operator">=</span> <span class="token string">'lighter'</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">var</span> i <span class="token operator">=</span> particles<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&gt;=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        particles<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">draw</span><span class="token punctuation">(</span>clickparticle<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">//按下时显示效果,mousedown 换成 click 为点击时显示效果(我用的 click)</span>
<span class="token object">document</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"mousedown"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> max<span class="token punctuation">,</span> j<span class="token punctuation">;</span>
    <span class="token comment">//排除一些元素</span>
    <span class="token string">"TEXTAREA"</span> <span class="token operator">!==</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>nodeName <span class="token operator">&amp;&amp;</span> <span class="token string">"INPUT"</span> <span class="token operator">!==</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>nodeName <span class="token operator">&amp;&amp;</span> <span class="token string">"A"</span> <span class="token operator">!==</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>nodeName <span class="token operator">&amp;&amp;</span> <span class="token string">"I"</span> <span class="token operator">!==</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>nodeName <span class="token operator">&amp;&amp;</span> <span class="token string">"IMG"</span> <span class="token operator">!==</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>nodeName 
    <span class="token operator">&amp;&amp;</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span>max <span class="token operator">=</span> <span class="token function">random</span><span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> max<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> 
        clickparticle<span class="token punctuation">.</span><span class="token function">spawn</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>clientX<span class="token punctuation">,</span> e<span class="token punctuation">.</span>clientY<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

}

Js

接着在body中引入:

<div id="clickCanvas" style=" position:fixed;left:0;top:0;z-index:999999999;pointer-events:none;"></div>
HTML

Last modification:May 6th, 2020 at 12:07 am
如果觉得我的文章对你有用,请随意赞赏