1、一: 进入"设置"图1-1 点击自己的主页的'admin', 进入自己的博客的管理页面;图1-2 ,1-3 进入'设置选项',向下拉,找到"页面定制CSS代码"模块.
2、二: 设置页面定制CSS代码图2-1:指定的自己的博客皮肤,我选择的这款皮肤"E艘绒庳焰n_summerGarden" ,可以保持全局透明,方便Canvas动画交互展示出来;页面定制CSS代码 :#canvas{position: fixed; top:0; left: 0; z-index:-1; opacity:0.8;} 代码解释: 设置了一个id选择器, 方便下一步的"页首Html代码" 的canvas动画进行调用 ,position / top/ left 确保了 canvas 动画可以全局显示出来,z-index 默认是0 会影响正常的点击操作,在这里改成-1 , opacity表示canvas动画的透明度, 笔者觉得0.8 刚刚好.图2-2 博客园的默认皮肤可能太丑也可能不合适, 有能力的可以进行重写,点击"禁用模板默认CSS" ,然后在"页面定制CSS代码" 中嵌入即可! 笔者仅仅重写了几个超链接和标题字_效果也不怎么好.图2-3 具体更好的办法, 百度搜索 "博客园模板默认CSS" ,找到合适的粘过来,自己用即可!
3、三:设置页首Html代码图3-1,图3-2 (接着一直向下拉动页面)页首Html代码大致结构如下:<canvas id="canvas" ></canvas> // 选择器 id="canvas" 对应上步的页面定制CSS代码 : #canvas{....}<script type="text/javascript"> window.onload = function(){ //当页面加载时调用一下内容................................................ /* 在这里加入你的JS脚本和canvas动画代码 */}</script>3-3 :百度 "canvas动画Html代码": 诸如: "8个经典炫酷的HTML5 Canvas动画欣赏" / "7个惊艳的HTML5 Canvas动画效果及源码 " 之类的,自己拷贝一下代码保存到本地.
4、四 代码本地测试图4-1: 记得先在自己的本地的浏览器上跑一遍,进行简单测试,然后把其中的控制canvas动画的JS脚本摘出来放进去博客园"页首Html代码"中, 注意按照上面的格式即可!图4-2: 初步在浏览器上运行观察效果.
5、五 最终的博客园canvas动画背景效果展示最后设置完成后,进行保存,刷新一下自己的博客即可!
