网页鼠标动态线条html5,网站动态背景线条跟随鼠标移动,吸附鼠标效果代码
经常看到有些SEO博客网站上有这种用动态线条作为网站背景的效果,当鼠标移动上去的时候会出现线条吸附在鼠标周围的特效,鼠标离开的时候线条就自动散开。这个效果之前在我的博客上也有加过,其实效果还是挺不错的。这种网站动态背景线条跟随鼠标移动,吸附鼠标效果代码是用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",.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
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,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.οnresize=o,
window.οnmοusemοve=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.οnmοuseοut=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)
}();
本文来源:故事seo 本文链接:http://www.seogushi.cn/wj/1110.html
网页鼠标动态线条html5,网站动态背景线条跟随鼠标移动,吸附鼠标效果代码相关推荐
- html 页面飘花,HTML5开发实例-ThreeJs实现粒子动画飘花效果代码分享
粒子动画在ThreeJs可以用几种方式实现 本次样例使用Sprite类来构建粒子 大概意思:这个类创建的对象是一个始终面向相机的平面,可以把贴图应用在上面,Sprite对象无法添加阴影 ,所以cast ...
- 网站动态背景线条跟随鼠标移动,吸附鼠标效果代码
经常看到有些SEO博客网站上有这种用动态线条作为网站背景的效果,当鼠标移动上去的时候会出现线条吸附在鼠标周围的特效,鼠标离开的时候线条就自动散开.这个效果之前在我的博客上也有加过,后来网站改版就没有继 ...
- Qt QPainter鼠标绘制线条、矩形、多边形
Qt通过鼠标绘制线条.矩形.多边形本质都是根据鼠标的坐标位移,使用QPainter的自带的函数进行绘制.具体代码如下: graphicspainter.h #ifndef GRAPHICSPAINTE ...
- 网站动态背景线条跟随鼠标移动,吸附鼠标效果
网站动态背景线条跟随鼠标移动,吸附鼠标效果 动态背景线条,鼠标移动可以吸附,可以添加配置,代码如下: <!DOCTYPE html> <html lang="en" ...
- 网页动态背景——随鼠标变换的动态线条(鼠标蜘蛛网特效)
网页动态背景--随鼠标变换的动态线条 效果图如下 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv=& ...
- 网页背景动态线条 鼠标吸附动态线条效果的实现
经常在浏览网页的时候看到有鼠标能够吸附动态线条的动画效果,如下所示 觉得很酷炫,百度了一下(记录下来,以后就可以使用了),效果是用一段js代码实现的,如下所示 <script> !func ...
- 动态背景线条,鼠标移动线条汇聚
实现如下的效果: 如图所示的效果代码: <!DOCTYPE html> <html> <head><meta charset="UTF-8" ...
- 背景动态线条js特效html5代码
下载地址 背景动态线条特效html5代码,基于canvas画布实现的背景线条动画特效. dd:
- html5怎么在index设置背景,index.html · huangliusong/HTML5Canvas知乎登录页面动态线条背景动画代码 - Gitee.com...
HTML5+Canvas知乎登录页面动态线条背景动画代码 body{ text-align: center; background: #F7FAFC; overflow: hidden; backgr ...
- HTML5 实现动态爱心网页代码
HTML5 实现动态爱心网页代码 表白女朋友找不到合适的方法?可以试一试动态爱心网页,带你升华感情,一步步走上人生巅峰. 代码如下: <!doctype html> <html> ...
最新文章
- 谷歌浏览器 chrome 查看当前页面cookie
- matlab画曲面二次,如何用matlab绘制二次B样条三维曲面(已知控制点和节点矢量)?...
- 已知三角形三点坐标求角度_细心研磨椭圆焦点三角形,这肯定是最全的解释。...
- oracle 批量导出sequence,如何单独导出导入sequence?
- 如何通过BBED找回删除数据
- 【TensorFlow】Windows10 64位下安装TensorFlow - 官方原生GPU版安装
- 暖通专业标准规范大全_完美!暖通空调专业工程量计算知识大全
- 备份linux分区到usb,将Linux引导加载程序备份到USB的方法
- 图像分割方法及性能评价综述
- 网易公开课专辑下载脚本python
- 区块链技术实体结合解决方案——汇新云
- 如何锻炼自己的逻辑思维
- Task一个轻量级分布式任务计算系统
- 【密码资料】纳瓦霍密码
- NCC的openApi介绍、NCC二开,对接NCC、简化版的openapi服务
- Linux CentOS7 升级内核的方法
- An attempt was made to call the method javax.persistence.PersistenceContext.synchronization()
- css零到一中级教程025:CSS 特异性
- 惠民计算机学校,惠民县职业中等专业学校
- mysql启动错误1.69_开启伪静态出错iPHP Error: iCMS 运行出错!找不到文章: ID:404(10001)...