博客园背景滴墨水特效

设计自己的神奇滴墨水，你只需这几步：

点开博客园后台
点开设置
找到“页首 HTML 代码”（页尾也可以）
输入代码保存即可
（要先申请js权限哦）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>canvas</title><style type="text/css">* {margin: 0;padding: 0;}body {width: 100%;height: 100%;overflow: hidden;position: fixed;}</style><script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<canvas id="c" width="1536"></canvas>
<script type="text/javascript">$(document).ready(function () {var canvas = document.getElementById("c");var ctx = canvas.getContext("2d");var c = $("#c");var w, h;var pi = Math.PI;var all_attribute = {num: 100,                        // 个数
            start_probability: 0.1,          // 如果数量小于num，有这些几率添加一个新的
            radius_min: 1,                   // 初始半径最小值
            radius_max: 2,                   // 初始半径最大值
            radius_add_min: .3,               // 半径增加最小值
            radius_add_max: .5,               // 半径增加最大值
            opacity_min: 0.3,                 // 初始透明度最小值
            opacity_max: 0.5,                // 初始透明度最大值
            opacity_prev_min: .003,            // 透明度递减值最小值
            opacity_prev_max: .005,            // 透明度递减值最大值
            light_min: 40,                 // 颜色亮度最小值
            light_max: 70,                 // 颜色亮度最大值
        };var style_color = find_random(0, 360);var all_element = [];window_resize();function start() {window.requestAnimationFrame(start);style_color += .1;ctx.fillStyle = 'hsl(' + style_color + ',100%,97%)';ctx.fillRect(0, 0, w, h);if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability) {all_element.push(new ready_run);}all_element.map(function (line) {line.to_step();})}function ready_run() {this.to_reset();}ready_run.prototype = {to_reset: function () {var t = this;t.x = find_random(0, w);t.y = find_random(0, h);t.radius = find_random(all_attribute.radius_min, all_attribute.radius_max);t.radius_change = find_random(all_attribute.radius_add_min, all_attribute.radius_add_max);t.opacity = find_random(all_attribute.opacity_min, all_attribute.opacity_max);t.opacity_change = find_random(all_attribute.opacity_prev_min, all_attribute.opacity_prev_max);t.light = find_random(all_attribute.light_min, all_attribute.light_max);t.color = 'hsl(' + style_color + ',100%,' + t.light + '%)';},to_step: function () {var t = this;t.opacity -= t.opacity_change;t.radius += t.radius_change;if (t.opacity <= 0) {t.to_reset();return false;}ctx.fillStyle = t.color;ctx.globalAlpha = t.opacity;ctx.beginPath();ctx.arc(t.x, t.y, t.radius, 0, 2 * pi, true);ctx.closePath();ctx.fill();ctx.globalAlpha = 1;}}function window_resize() {w = window.innerWidth;h = window.innerHeight;canvas.width = w;canvas.height = h;}$(window).resize(function () {window_resize();});function find_random(num_one, num_two) {return Math.random() * (num_two - num_one) + num_one;}(function () {var lastTime = 0;var vendors = ['webkit', 'moz'];for (var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||window[vendors[xx] + 'CancelRequestAnimationFrame'];}if (!window.requestAnimationFrame) {window.requestAnimationFrame = function (callback, element) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));var id = window.setTimeout(function () {callback(currTime + timeToCall);}, timeToCall);lastTime = currTime + timeToCall;return id;};}if (!window.cancelAnimationFrame) {window.cancelAnimationFrame = function (id) {clearTimeout(id);};}}());start();});
</script>
</body>
</html>

效果图：

博客园背景滴墨水特效相关推荐

博客园背景特效之《爱心+蜘蛛网》
博客园特效--点击出现爱心❥,实现代码:JavaScript <script type="text/javascript"> (function(window,docu ...
屏蔽博客园背景动态线条
1. 问题描述由于博客园允许用户添加含js的html代码来装饰自己的博客界面,这导致很多人跟风地给自己博客添加背景动态线条.live2D等,其中动态背景线条如下图所示: 它不停地随机生成线条,并漂浮 ...
博客园美化（3）博客园鼠标点击特效代码
博客园鼠标点击特效代码样式效果鼠标点击出现烟花和"富强", "民主", "文明", "和谐"... 特效使用方法 ...
博客园背景特效（粒子线条，彩带，滴墨水）
博客园动态背景博客园许多个人博客首页里面的背景加入了特效以下展示几个好玩的特效一.动态粒子线条.带鼠标吸附 <!DOCTYPE html> <html lang="e ...
博客园动态小老鼠特效
想在自己的博客园养个小老鼠,你只需这几步: 点开博客园后台点开设置找到"博客侧边栏公告" 输入代码保存即可 (要先申请js权限哦) 代码如下: <!-- 小老鼠控件 -- ...
博客园鼠标点击特效、自定义背景、看板娘等
一.鼠标点击烟花特效: 在页脚HTML处添加以下代码: <script src="https://files.cnblogs.com/files/wkfvawl/mouse-click ...
博客园背景设置CSS代码
/配色参考->>->>>//https://zh.spycolor.com/color-index,a*/ #home { margin: 0 auto; width: ...
html5blog简单特效代码,个人博客网站背景视觉滚动特效代码
之前一直注重模块的视觉滚动特效以至于忽略了图片背景的视觉差滚动特效,今天把小清新主题更新了图片背景视觉差特效,记录下代码,有喜欢的自己参考教程自己动手操作下.这是在网络上找到的一款超级轻量级的jQue ...
DIY修改博客园背景用【保存图片用】
在火狐浏览器下F12进入样式,根据右侧栏的css代码,把需要修改的修改了,然后立即就能看见效果.将代码复制到后台设置那里的css样式里就好了. 以下是我用来保存图片网址的工具...自己用的,如果紧紧想 ...

博客园背景滴墨水特效

效果图：

博客园背景滴墨水特效相关推荐

最新文章

热门文章