博客主页动态线条效果

经过一个下午你努力,我也把自己的博客主页变成了动态的效果了嘿嘿嘿。

这里声明一件事情以下内容是借鉴他人作品而写的我只是一个搬运工

借鉴博客   :https://www.cnblogs.com/panghu123/     如若侵权请告知

先插效果图  效果如下:

接着上代码:

<script type="text/javascript">
        /**
         * Copyright (c) 2016 hustcc
         * License: MIT
         * Version: v1.0.1
         * GitHub: https://github.com/hustcc/canvas-nest.js
        **/
        !
            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", .8),
                        c: n(i, "color", "255,255,255"),
                        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)
            }();
</script>

将代码放到博客侧边公告栏里 (要支持js代码,如果没有申请 要先申请后才能效果):

把js权限开通,然后把代码复制进去就可以了。

这里讲一下怎么修改线条属性  :

每个人背景模板会不一样上面代码颜色是默认的要修改属性才能看得清

color:线条颜色,默认值:‘0,0,0‘;RGB值:(0~255,0~255,0~255)。(注意:使用‘,‘分隔。)
pointColor:点的颜色,默认值:‘0,0,0‘;RGB值:(0~255,0~255,0~255)。(注意:使用‘,‘分隔。)
opacity:线的不透明度(0?1),默认值:0.5。
count:行数,默认值:99。
zIndex:背景的z-index属性,默认值:-1。

这样动态效果就可以了,按照自己的想要的效果调还是很好看的   over

原文地址:https://www.cnblogs.com/2979100039-qq-con/p/12358039.html

时间: 2024-11-09 01:40:56

博客主页动态线条效果的相关文章

实现我博客旁边的线条效果 html canvas-nest.js 源码

canvas-nest.js 这个js文件可以用来实现炫酷的线条与鼠标进行交互的功能,具体效果如图所示 js具体源码如下: /** * Copyright (c) 2016 hustcc * License: MIT * Version: %%GULP_INJECT_VERSION%% * GitHub: https://github.com/hustcc/canvas-nest.js **/ ! function() { //封装方法,压缩之后减少文件大小 function get_attri

报障系统之博客主页及后台管理

个人博客: url函数(路由系统): """baozhang URL Configuration The `urlpatterns` list routes URLs to views. For more information please see: https://docs.djangoproject.com/en/1.11/topics/http/urls/ Examples: Function views 1. Add an import: from my_app i

个人博客主页搭建随笔

经常在各种论坛.博客还有 github 上活跃的朋友不难发现,许多大牛都有自己的网站,也多以博客为主.博主作为一个立志前端的大白,难道不应该和大牛学习么? 说干就干,前端部分和 web 开发博主做了很多学习和总结,不少也写成了博客.对于后端,博主不敢说完全没有经验,但接触的也都比较简单.于是乎,博主去年六月底开始看 Node 和 Express,利用空闲时间做了自己的博客,现阶段还有许多不足,需要后续不断改进.不过这不妨碍博主先总结一下自己的感受. UI设计 和 架构设计 博主深刻的感受到自己并

博客主页截图

20015年06月02日 第二次 第一次

pd的django个人博客教程----1:效果展示等

开发环境同to do list 1:首页:localhost/pd/ 2:导航栏测试或者生活点入: 测试:localhost/category/?cid=1 3:点击文章后进入文章显示页面 e.g:进入文章7:localhost/article/?id=7 4:右侧边栏文章分档界面; e.g:2015,10归档:localhost/archive/?year=2015&month=10 5:浏览排行与评论排行等只是点击跳转到相应文章页面就是了. 各个页面做了展示主要目的是列出对应的URL传递,好

JS无刷新修改URL类似博客园翻页效果

<script type="text/javascript"> function changeURL(){ var url = document.getElementById('url').value; window.history.pushState({},0,'http://'+window.location.host+'/'+url); } </script>

博客样式(动态背景线条跟随鼠标移动)

代码(将代码添加至页脚html板块): 1 <!--代码放置于</body>上方--> 2 3 <script> 4 5 !function(){ 6 7 function n(n,e,t){ 8 9 return n.getAttribute(e)||t 10 11 } 12 13 function e(n){ 14 15 return document.getElementsByTagName(n) 16 17 } 18 19 function t(){ 20 21

博客园美化教程大集合(超详细,看这篇就够了)

阅读目录: 1. 前言 2. 定制自己的博客 0. 美化整体效果 1. 准备工作 2. 自定义个性化导航栏 3. 添加顶部博主信息 4. 添加顶部滚动公告 5. 为博客文章添加目录导航 6. 添加分享功能按键 7. 定制推荐和反对按键的炫酷样式 8. 添加快速返回顶部的功能按键 9. 添加打赏功能按键 10. 添加页面放大缩小功能按键 11. 添加Github图标及链接 12. 添加公告栏图片 13. 添加公告栏文字信息 14. 添加公告栏个性时钟 15. 为公告栏添加访客来源统计 16. 为公

Vue.js实践:一个Node.js+mongoDB+Vue.js的博客内容管理系统

项目来源 以前曾用过WordPress搭建自己的博客网站,但感觉WordPress很是臃肿.所以一直想自己写一个博客内容管理器. 正好近日看完了Vue各个插件的文档,就用着Vue尝试写了这个简约的博客内容管理器(CMS). 嗯,我想完成的功能: 一个基本的博客内容管理器功能,如后台登陆,发布并管理文章等 支持markdown语法实时编辑 支持代码高亮 管理博客页面的链接 博客页面对移动端适配优化 账户管理(修改密码) Demo 登陆后台按钮在页面最下方"站长登陆",可以以游客身份登入后