现在许多博客园个人首页里面的动态背景加入了动态线条,那这是怎么设置添加的呢,接下来告诉你具体操作,很简单

1.点开博客园个人首页,管理

2.点开设置

3.找到博客侧边栏公告,申请添加JS权限后,

  注意:申请权限不通过或没申请,在添加代码时会出现异常,自动清除代码内容

添加代码:

<script>!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)}();</script>

具体操作如下图:

4.最后点击保存就可以了,然后返回个人首页看效果,效果如下:

转载于:https://www.cnblogs.com/lzw123-/p/9394886.html

动态线条,随鼠标移动吸附效果相关推荐

  1. 网页动态背景——随鼠标变换的动态线条(鼠标蜘蛛网特效)

    网页动态背景--随鼠标变换的动态线条 效果图如下 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv=& ...

  2. 网站动态背景线条跟随鼠标移动,吸附鼠标效果代码

    经常看到有些SEO博客网站上有这种用动态线条作为网站背景的效果,当鼠标移动上去的时候会出现线条吸附在鼠标周围的特效,鼠标离开的时候线条就自动散开.这个效果之前在我的博客上也有加过,后来网站改版就没有继 ...

  3. 网页背景动态线条 鼠标吸附动态线条效果的实现

    经常在浏览网页的时候看到有鼠标能够吸附动态线条的动画效果,如下所示 觉得很酷炫,百度了一下(记录下来,以后就可以使用了),效果是用一段js代码实现的,如下所示 <script> !func ...

  4. 网站动态背景线条跟随鼠标移动,吸附鼠标效果

    网站动态背景线条跟随鼠标移动,吸附鼠标效果 动态背景线条,鼠标移动可以吸附,可以添加配置,代码如下: <!DOCTYPE html> <html lang="en" ...

  5. 屏蔽博客园背景动态线条

    1. 问题描述 由于博客园允许用户添加含js的html代码来装饰自己的博客界面,这导致很多人跟风地给自己博客添加背景动态线条.live2D等,其中动态背景线条如下图所示: 它不停地随机生成线条,并漂浮 ...

  6. 博客园添加鼠标粒子吸附特效

    本文从以下三个方面, 阐述在博客园添加鼠标粒子吸附特效: 一. 效果展示 二. 权限申请 三. 设置步骤 一. 效果展示 在博客园的页面, 出现鼠标粒子吸附的特效, 如图所示: 二. 权限申请 点击博 ...

  7. Hexo博客主题Next添加动态线条背景canvas_nest

    ​欢迎光临我的博客查看最新文章: https://river106.cn Hexo 版本:5.4.0 Next版本:8.7.1 为了美化Hexo博客,可以给博客添加动态线条背景,这里使用canvas_ ...

  8. html5页面中鼠标悬停效果,CSS实例:非常不错的鼠标悬停TIP效果!_div+css布局教程...

    在实际开发中,我们会给图片加上alt.给链接加上title,为了出故障预备,也可以提醒用户的内容是什么,或仅仅是tip提示.今天我们介绍一款不错的鼠标悬停TIP效果,图片如下: 这样的效果在实际开发中 ...

  9. 博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)...

    前言 在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动 ...

最新文章

  1. access导出MySQL表格_如何将Access数据库里的表内容导出到Excel
  2. libjpeg的问题
  3. C# in Depth-类型系统的特征
  4. SQL Server2000企业管理器在Win7中新建表错误的解决方法
  5. 工作做事通用方法探索
  6. 将一个数转化为二进制java_java将一个整数转化成二进制代码示例
  7. [转]iOS技巧之获取本机通讯录中的内容,解析通讯录源代码
  8. mobi格式转换成pdf格式
  9. qq空间留言板删除 php,qq批量删除空间留言及说说
  10. 程序员的发展之道---海贼王(山治)
  11. 测绘资质高性能数据服务器,测绘资质分级标准2020年
  12. May 17th Thursday (五月 十七日 木曜日)
  13. `include “uvm_macros.svh“引发的思考
  14. 蓝桥杯单片机设计与开发_标准模板
  15. 网页中常用的js特效
  16. vue 动态生成下载二维码
  17. Python编写简单的计算器,用户输入两个数字和一个四则运算符,计算结果
  18. 周文康的大一Python学习心得体会
  19. Docker 退出容器不停止容器运行
  20. GEEer成长日记十七:在Google Earth Engine(GEE)中批量下载MODIS NDVI数据

热门文章

  1. oracle实时监控触发邮件,利用EasySQLMAIL实现数据库订单监控和邮件发送
  2. git常见使用场景总结
  3. 在C 函数中保存状态:registry、reference和upvalues
  4. bat批处理重命名问题
  5. 第三部分:MFC中控件的样式
  6. [C# 开发技巧系列] 使用C#操作幻灯片
  7. 产生一个int数组,长度为100,并向其中随机插入1-100,并且不能重复。
  8. 页面如何让它不显示标题栏,菜单栏,工具栏,地址栏
  9. python定义一个空数组_python如何创建空数组?
  10. python语言及其应用下载_Python语言及其应用 中文pdf完整版[13MB]