博客园线条随鼠标动画
博客园线条随鼠标动画
直接将一下代码加入html的最下面即可
<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>
看板娘
一下通过cdn连接js,直接复制进入空html文件即可访问
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>看板娘</title>
</head>
<body>
<!--
可替换的模型名称
2D模型全名称:
live2d-widget-model-haruto 小娃娃(男)
live2d-widget-model-koharu 小娃娃(女)
live2d-widget-model-ni-j 小娃娃(不知道怎么描述,带这个耳机)
live2d-widget-model-nico 小娃娃(狐狸??)
live2d-widget-model-nipsilon 小娃娃(粉长头发小娃娃)
live2d-widget-model-nito 小娃娃(粉短头发小娃娃)
live2d-widget-model-unitychan 小娃娃(黄色长头发小娃娃)
live2d-widget-model-chitose 一个帅哥
live2d-widget-model-shizuku 坐在课桌上的小美女
live2d-widget-model-hibiki 一个小妹妹
live2d-widget-model-izumi 一个妹子
live2d-widget-model-tsumiki 绿萝????
live2d-widget-model-miku 初音
live2d-widget-model-z16 这个妹子好看
live2d-widget-model-hijiki 黑猫
live2d-widget-model-tororo 白猫
live2d-widget-model-wanko 趴在碗里的狗
-->
<div id="live2d-widget">
<canvas id="live2dcanvas">
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-koharu/assets/koharu.model.json",//这里改模型,前面后面都要改
"scale": 1
},
"display": {
"position": "left",//设置看板娘的上下左右位置
"width": 80,
"height": 200,
"hOffset": 30,
"vOffset": 30
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.8,//设置透明度
"opacityOnHover": 0.2
}
});
window.onload = function () {
$("#live2dcanvas").attr("style", "position: fixed; opacity: 0.7; left: 170px; bottom: 0px; z-index: 1; pointer-events: none;")
}
</script>
</html>