给你的WordPress博客加上各种花里胡哨的特效

早年我在玩WordPress的时候喜欢各种花里胡哨的东西，什么canvas-nest，网页下雪特效，网页复制弹窗，鼠标样式，鼠标点击特效等等，但随着年纪的增长慢慢对这些不太感兴趣了，博客搬家之后只保留了部分特效，写篇文章记录一下

这些大多为JavaScript代码，在WordPress中先引入Jquery库然后粘贴或者封装引入即可，这里还有个即时预览的方法，在webkit浏览器（Chrome等）按下F12检查，在console里面粘贴一下代码，然后回车执行即可看到效果了，以下部分特效叠加使用不起作用

页面下雪特效

代码较长，JS源码如下 sonwy.js

Canvas-nest网状特效

color：画布线颜色，默认值：'0,0,0'; 颜色为（R，G，B），opacity：线的不透明度（0〜1），默认值：0.5，count：行数，默认值：150，setTimeout：网页上出现的延迟

!function()

{function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];

return{

l:o,

z:n(i,"zIndex",-1),

o:n(i,"opacity",.5),

c:n(i,"color","0,0,0"),

n:n(i,"count",99)

}

}function o(){a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight

}function i(){r.clearRect(0,0,a,c);var n,e,t,o,m,l;s.forEach(function(i,x){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))}),x(i)}var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+d.l,r=m.getContext("2d"),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,y.x=n.clientX,y.y=n.clientY},window.onmouseout=function(){y.x=null,y.y=null};for(var s=[],f=0;d.n>f;f++){var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})}u=s.concat([y]),

setTimeout(function(){i()},100)}();

鼠标点击文字特效

var a_idx = 0;jQuery(document).ready(function($) {$("body").click(function(e) {var a = new Array("富强", "民主", "文明", "和谐", "爱国", "敬业", "友善" ,"诚信");var $i = $("").text(a[a_idx]);

a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({"z-index": 999,"top": y - 20,"left": x,

"position": "absolute","font-weight": "bold","color": "#ff6651"}); $("body").append($i);$i.animate({ "top": y - 180,"opacity": 0},1500, function() {$i.remove();});});});var _hmt = _hmt || [];

(function() {

var hm = document.createElement("script");

hm.src = "https://hm.baidu.com/hm.js?068e8f57dc240ec2a0129120cf63a255";

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(hm, s);

})();

鼠标点击随机颜色爱心特效

爱心的基本样式在function(n)里，随机颜色则是由function(s)里的rgb*Math.random来实现

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

WordPress复制内容跳出提示框

打开WordPress的footer.php文件，在此<?php endif; ?>之前，加入下面的代码就可以了

document.body.oncopy=function(){

alert("复制成功!若要转载请务必保留原文链接,

本文来自阿蔡不菜个人博客,谢谢合作!");

}

</script>

切换页面标题变换

详情可查看文章- JavaScript实现切换标签时，改变原页面标题

纯CSS画的玩偶-Eevee

footer.php中的</body>前加入以下代码，同时在header.php中引入CSS，也可直接写在style.css里

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div></div></div></div>

</div>

</div>

</div>

更多CSS特效可查看文章-如何用CSS画一个小猪佩奇

CSS JavaScript WordPress

Hungway

If not me,who?If not now,when?

给你的WordPress博客加上各种花里胡哨的特效

页面下雪特效

Canvas-nest网状特效

鼠标点击文字特效

鼠标点击随机颜色爱心特效

WordPress复制内容跳出提示框

切换页面标题变换

纯CSS画的玩偶-Eevee

文章评论（0）