博客园特效美化
关于前言
最近很多小伙伴找我要源码,评论区有说明,博客园皮肤主题链接
https://www.cnblogs.com/bndong/
最近看了很多博客园的美化教程
1、背景随机线条 博客园—设置— 页脚Html代码
<script type="text/javascript" color="47,135,193" opacity='0.5' zIndex="-2" count="199" src="http://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
1 参数: 2 3 count :线条数量。 4 5 zindex :层级。 6 7 opacity:透明度。 8 9 color :线条颜色。最好用RGB颜色。
2、背景雪花掉落效果 博客园—设置— 页脚Html代码
1 <script src="https://blog-static.cnblogs.com/files/zhonglinke/jquery-1.7.1.min.js"></script> 2 3 <script src="https://files.cnblogs.com/files/zhonglinke/jquery.snow.js"></script>
3、鼠标点击出现爱心特效 博客园—设置— 页脚Html代码
<script src="https://files.cnblogs.com/files/zhonglinke/my.js"></script>
1 <script> 2 (function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('❄'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:20,maxSize:40,newOn:300,flakeColor:"#2894FF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery); 3 $.fn.snow({ minSize: 5, maxSize: 50, newOn: 800, flakeColor: '#2894FF' }); 4 </script>
/* 鼠标特效 var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("❤","⚡","💎","🔥","☻","☀","😉","🍂","😏",); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); */
4、canvas炫酷背景 演示地址http://www.htmleaf.com/Demo/201901145493.html
博客园—设置— 页脚Html代码
<script src="https://files.cnblogs.com/files/zhonglinke/vendors.js"></script>
<script type="text/javascript" language="javascript"> ! function (e) { function t(t) { for (var o, a, c = t[0], u = t[1], s = t[2], l = 0, p = []; l < c.length; l++) a = c[l], r[a] && p.push(r[a][0]), r[a] = 0; for (o in u) Object.prototype.hasOwnProperty.call(u, o) && (e[o] = u[o]); for (f && f(t); p.length;) p.shift()(); return i.push.apply(i, s || []), n() } function n() { for (var e, t = 0; t < i.length; t++) { for (var n = i[t], o = !0, c = 1; c < n.length; c++) { var u = n[c]; 0 !== r[u] && (o = !1) } o && (i.splice(t--, 1), e = a(a.s = n[0])) } return e } var o = {}, r = { 4: 0 }, i = []; function a(t) { if (o[t]) return o[t].exports; var n = o[t] = { i: t, l: !1, exports: {} }; return e[t].call(n.exports, n, n.exports, a), n.l = !0, n.exports } a.m = e, a.c = o, a.d = function (e, t, n) { a.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: n }) }, a.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, a.t = function (e, t) { if (1 & t && (e = a(e)), 8 & t) return e; if (4 & t && "object" == typeof e && e && e.__esModule) return e; var n = Object.create(null); if (a.r(n), Object.defineProperty(n, "default", { enumerable: !0, value: e }), 2 & t && "string" != typeof e) for (var o in e) a.d(n, o, function (t) { return e[t] }.bind(null, o)); return n }, a.n = function (e) { var t = e && e.__esModule ? function () { return e.default } : function () { return e }; return a.d(t, "a", t), t }, a.o = function (e, t) { return Object.prototype.hasOwnProperty.call(e, t) }, a.p = ""; var c = window.webpackJsonp = window.webpackJsonp || [], u = c.push.bind(c); c.push = t, c = c.slice(); for (var s = 0; s < c.length; s++) t(c[s]); var f = u; i.push([30, 0]), n() }({ 27: function (e, t, n) {}, 30: function (e, t, n) { "use strict"; n.r(t); var o = n(1), r = n(6), i = n(15), a = n(10), c = n(9), u = n(2), s = n(11), f = n(7), l = n(8), p = n(34), y = n(37), h = n(35), b = n(36); function d(e) { return (d = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) { return typeof e } : function (e) { return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e })(e) } function v(e, t) { for (var n = 0; n < t.length; n++) { var o = t[n]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, o.key, o) } } function w(e, t) { return !t || "object" !== d(t) && "function" != typeof t ? function (e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e }(e) : t } function m(e) { return (m = Object.setPrototypeOf ? Object.getPrototypeOf : function (e) { return e.__proto__ || Object.getPrototypeOf(e) })(e) } function O(e, t) { return (O = Object.setPrototypeOf || function (e, t) { return e.__proto__ = t, e })(e, t) } var g, j, P = n(4); n(14), n(27); function S(e, t) { for (var n = 0; n < t.length; n++) { var o = t[n]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, o.key, o) } } function _(e, t, n) { return (_ = "undefined" != typeof Reflect && Reflect.get ? Reflect.get : function (e, t, n) { var o = function (e, t) { for (; !Object.prototype.hasOwnProperty.call(e, t) && null !== (e = F(e));); return e }(e, t); if (o) { var r = Object.getOwnPropertyDescriptor(o, t); return r.get ? r.get.call(n) : r.value } })(e, t, n || e) } function k(e) { return (k = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) { return typeof e } : function (e) { return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e })(e) } function M(e, t) { if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function") } function x(e, t) { return !t || "object" !== k(t) && "function" != typeof t ? function (e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e }(e) : t } function F(e) { return (F = Object.setPrototypeOf ? Object.getPrototypeOf : function (e) { return e.__proto__ || Object.getPrototypeOf(e) })(e) } function T(e, t) { if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function"); e.prototype = Object.create(t && t.prototype, { constructor: { value: e, writable: !0, configurable: !0 } }), t && z(e, t) } function z(e, t) { return (z = Object.setPrototypeOf || function (e, t) { return e.__proto__ = t, e })(e, t) } var E, L = new(g = Object(f.a)({ x: 1, y: 1 }, .1), Object(l.a)((E = j = g(j = function (e) { function t() { return M(this, t), x(this, F(t).apply(this, arguments)) } return T(t, r["a"]), t }()) || j, j = function (e) { function t(e) { var n; return function (e, t) { if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function") }(this, t), (n = w(this, m(t).call(this, e))).clock = new o.Clock, n.currentPass = !1, n.effects = {}, n.passes = [], n.composer = new p.a(n.renderer, {}), n.effects.render = new y.a(n.scene, n.camera), n.addPass(n.effects.render), n } var n, r, i; return function (e, t) { if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function"); e.prototype = Object.create(t && t.prototype, { constructor: { value: e, writable: !0, configurable: !0 } }), t && O(e, t) }(t, E), n = t, (r = [{ key: "addBloomEffect", value: function (e, t) { this.effects.bloom = new h.a(e), this.effects.bloom.blendMode.opacity.value = t, this.addPass(new b.a(this.camera, this.effects.bloom)) } }, { key: "addPass", value: function (e) { this.passes.length && (this.passes[this.passes.length - 1].renderToScreen = !1), this.passes.push(e), this.composer.addPass(e), this.passes[this.passes.length - 1].renderToScreen = !0 } }, { key: "render", value: function () { this.composer.render(this.clock.getDelta()) } }, { key: "resizeRender", value: function () { this.composer && this.composer.setSize(this.width, this.height) } }]) && v(n.prototype, r), i && v(n, i), t }() || j)) || j); L.camera.position.z = 2, L.addBloomEffect({ resolutionScale: .5, kernelSize: 4, distinction: .01 }, 1); var R = new i.a; R.update = function () { R.rotation.y -= 4e-4, R.rotation.x -= 2e-4 }, L.add(R); var A = new o.Vector3, B = new o.Vector3, I = new o.Raycaster, D = new o.SphereBufferGeometry(4, 32, 32, 0, 3.2, 4, 2.1), J = new o.MeshBasicMaterial({ wireframe: !0, visible: !1 }), V = new o.Mesh(D, J); L.add(V), V.position.z = 2; var q = ["#FFFAFF", "#0A2463", "#3E92CC", "#723bb7", "#efd28e", "#3f9d8c"].map(function (e) { return new o.Color(e) }), G = new(function (e) { function t() { return M(this, t), x(this, F(t).apply(this, arguments)) } var n, o, r; return T(t, c["a"]), n = t, (o = [{ key: "addLine", value: function () { for (var e = Object(u.a)(-2.4, 7.2), n = -25 * Math.PI / 180, o = 200 * Math.PI / 180, r = []; n < o;) { n += .2, e -= .1, A.set(4 * Math.cos(n), e, 4 * Math.sin(n)), B.set(-A.x, 0, -A.z), B.normalize(), I.set(A, B); var i = I.intersectObject(V, !0); i.length && r.push(i[0].point.x, i[0].point.y, i[0].point.z) } 0 !== r.length && (Math.random() > .5 ? _(F(t.prototype), "addLine", this).call(this, { visibleLength: Object(u.a)(.01, .2), points: r, speed: Object(u.a)(.003, .008), color: Object(s.a)(q), width: Object(u.a)(.01, .1) }) : _(F(t.prototype), "addLine", this).call(this, { visibleLength: Object(u.a)(.05, .2), points: r, speed: Object(u.a)(.01, .1), color: q[0], width: Object(u.a)(.01, .01) })) } }]) && S(n.prototype, o), r && S(n, r), t }())({ frequency: .99 }, { transformLineMethod: function (e) { return e } }); L.add(G), L.start(); var H = new TimelineLite({ delay: .2, onStart: function () { G.start() } }); H.to(".overlay", 2, { autoAlpha: 0 }), H.fromTo(L.lookAt, 3, { y: -4 }, { y: 0, ease: Power3.easeOut }, "-=2"), H.add(C.show, "-=2"), P.a.onHide(function (e) { var t = new TimelineLite; t.to(L.lookAt, 2, { y: -6, ease: Power3.easeInOut }), t.add(C.hide, 0), t.add(G.stop), t.to(".overlay", .5, { autoAlpha: 1, onComplete: e }, "-=1.5") }) } }); </script>