博客园美化日记

复制代码
<!DOCTYPE html>
 <html>
 <body>
 
 <style>
 #Canvas{
    position:fixed;
    top:0px;
    left:0px;
 }
  </style>
 
 <canvas id="Canvas"></canvas>
 
  <style>
  #nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% }
  </style>
  
 <input type="image" id="Uleft" src="http://fq.wc.lt//up/1503755860.png" onmouseover="this.style.top='10px'; this.src='http://fq.wc.lt//up/1503755899.png' " onmouseout="this.style.top='-60px'; this.src='http://fq.wc.lt//up/1503755860.png' " onclick="ShowPicture()">
 
 <input type="image" id="Uright" src="http://fq.wc.lt//up/1503754720.png" onmouseover="this.style.top='10px'; this.src='http://fq.wc.lt//up/1503754624.png' " onmouseout="this.style.top='-55px'; this.src='http://fq.wc.lt//up/1503754720.png' " onclick="ChangePicture()" style="top: -55px;">
 
  <input type="image" id="Dright" src="http://fq.wc.lt//up/1504337868.png" onclick="ShowTab()">
  
  <input type="image" id="MagicArray" src="http://fq.wc.lt//up/1504338509.png" onclick="ShowTab()">
  
  <a name="Tab" id="Tab1" href="http://www.cnblogs.com/" style="right:78px;bottom:165px;">博客园</a>
  <a name="Tab" id="Tab1" href="http://www.cnblogs.com/ECJTUACM-873284962/" style="right:150px;bottom:130px;">首页</a>
  <a name="Tab" id="Tab1" href="https://msg.cnblogs.com/send/Angel_Kitty" style="right:10px;bottom:130px;">私信博主</a>
  <a name="Tab" id="Tab1" onclick="fixedIndexs.show()" style="right:120px;bottom:50px;">显示目录</a>
  <a name="Tab" id="Tab1" onclick="fixedIndexs.hide()" style="right:20px;bottom:50px;">隐藏目录</a>
  <a name="Tab" id="Tab1" href="https://i.cnblogs.com/" style="right:85px;bottom:10px;">管理</a>
  <a name="Tab" id="Tab1" style="right:85px;bottom:88px;" onclick="control()">动画</a>
  
  <script>
      window.requestAnimFrame=
          window.requestAnimationFrame||
          window.webkitRequestAnimationFrame||
          window.mozRequestAnimationFrame||
          window.oRequestAnimationFrame||
          window.msRequestAnimationFrame||
          function(callback){window.setTimeout(callback, 1000/10);};
      var W=document.body.scrollWidth,H=document.body.scrollHeight;
      var ca=document.getElementById("Canvas"),el=ca.getContext("2d");
      var num=0,SpeedBasic=3,SpeedRand=0.8,angleBasic=0.5,timer,lline=20;
      var x=new Array(),y=new Array(),speed=new Array(),angle=new Array(),t=new Array(),TT=new Array();
      var img1=new Image(),img2=new Image(),img3=new Image(),img4=new Image();
      ca.width=W;ca.height=H;
      img1.src="http://fq.wc.lt//up/1504690030.png";
      img2.src="http://fq.wc.lt//up/1504690047.png";
      img3.src="http://fq.wc.lt//up/1504690062.png";
     img4.src="http://fq.wc.lt//up/1504690077.png";
      
      function RandomNum(Min,Max){
         var Range=Max-Min;
          var Rand=Math.random();
          return(Min+Math.round(Rand * Range));
      }
      function RandomReal(Min,Max){
          return Min+(Max-Min)*Math.random();
      }
      function abs(W){return W<=0?-W:W;}
      function drawtail(px,py,an){
          an=Math.atan(an);
          for (var i=0;i<10;i++){
              var X,Y;
              Y=Math.sqrt(RandomReal(0,lline*lline));
              X=RandomReal(-Y*5/lline,Y*5/lline)+RandomReal(-Y*5/lline,Y*5/lline);
              Y=lline-Y;
              X+=10;
              el.fillRect(px+(X*Math.cos(an)-Y*Math.sin(an)),py-(X*Math.sin(an)+Y*Math.cos(an)),2,2);
          }
      }
      function drawstar(px,py,ti){
          if (ti==1) el.drawImage(img1,px,py,20,20);else
         if (ti==2) el.drawImage(img2,px,py,20,20);else
          if (ti==3) el.drawImage(img3,px,py,20,20);else
          if (ti==4) el.drawImage(img4,px,py,20,20);
      }
      function drawline(sx,sy,px,py){
          el.beginPath();
          el.moveTo(sx,sy);
          el.lineTo(px,py);
          el.stroke();
          el.closePath();
      }
      function dis(sx,sy,px,py){
          return Math.sqrt((px-sx)*(px-sx)+(py-sy)*(py-sy));
      }
      function work(timestamp){
         if (RandomNum(0,5)==0){
              x.push(RandomNum(0,W));
              y.push(RandomNum(0,H));
              t.push(0);
              TT.push(RandomNum(3,10));
              speed.push(SpeedBasic+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand));
              angle.push(RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic));
              for (;;){
                  if (Math.random()<=0.7) y[num]=0;else{
                     y[num]%=200;
                     if (Math.random()<=0.5) x[num]=0,angle[num]=abs(angle[num]);else x[num]=W-1,angle[num]=-abs(angle[num]);
                 }
                 var i;
              for (i=0;i<num;i++) if (dis(x[i],y[i],x[num],y[num])<20) break;
                 if (i==num) break;
                 x[num]=RandomNum(0,W);y[num]=RandomNum(0,H);
             }
             num++;
         }
         el.clearRect(0,0,W,H);
         el.fillStyle="#7B68EE";
         var tmp;
         for (var i=0;i<num;i++)
         for (var j=i+1;j<num;j++)
        if (dis(x[i],y[i],x[j],y[j])<20){
             tmp=speed[i];
             speed[i]=speed[j];
             speed[j]=tmp;
            
             tmp=angle[i];
             angle[i]=angle[j];
             angle[j]=tmp;
         }
         for (var i=0;i<num;i++){
            //el.fillRect(x[i],y[i],10,10);
             drawtail(x[i],y[i],angle[i]);
             drawstar(x[i],y[i],(parseInt(t[i]/TT[i])%4)+1);
             y[i]+=speed[i];x[i]+=(speed[i]*angle[i]);
             t[i]++;
             if (y[i]>=H||x[i]<0||x[i]>=W){
                 num--;
                 x[i]=x[num];y[i]=y[num];speed[i]=speed[num];angle[i]=angle[num];t[i]=t[num];TT[i]=TT[num];
                 x.pop();y.pop();speed.pop();angle.pop();t.pop();TT.pop();
                 i--;
             }
         }
         timer=requestAnimationFrame(work);
     }
     timer=requestAnimationFrame(work);
     var sta=1;
     function control(){
         if (sta==1){
             cancelAnimationFrame(timer);
             ca.style.opacity="0";
             sta=0;
}else{
             timer=requestAnimationFrame(work);
             ca.style.opacity="1";
             sta=1;
        }
     }
     
     
     function ShowTab(){
         dx=document.getElementById("MagicArray");
         if (dx.style.width=="200px"){
             dx.style.width="0px";
             dx.style.height="0px";
             dx.style.bottom="100px";
             dx.style.right="100px";
             dx.style.transform="rotate(0deg)";
         }else{
             dx.style.width="200px";
             dx.style.height="200px";
             dx.style.bottom="0px";
             dx.style.right="0px";
             dx.style.transform="rotate(180deg)";
         }
     
         dy=document.getElementsByName("Tab");
         for (var i=0;i<y.length;i++){
             dx=dy[i];
             if (dx.style.fontSize=="15px"){
                 dx.style.fontSize="0px";
                 dx.style.transitionDelay="0s";
             }else{
              dx.style.fontSize="15px";
                 dx.style.transitionDelay="0.8s";
             }
         }
     }
     function ShowPicture(){
         dx=document.getElementById("main");
         if (dx.style.opacity=="0") dx.style.opacity="0.9";else dx.style.opacity="0";
     }
     function ChangePicture(){
         dx=document.body;
         dy=RandomNum(0,14);
         if (dy==0){
             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202329872-1998585524.jpg) no-repeat fixed";
             dx.style.backgroundSize="cover";
      }else if (dy==1){
             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201704/841250-20170409090749785-323228483.jpg) no-repeat fixed";
             dx.style.backgroundSize="cover";
         }else if (dy==2){
             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174023882-274298407.jpg) no-repeat fixed";
             dx.style.backgroundSize="cover";
         }else if (dy==3){
             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174051757-1191896358.jpg) no-repeat fixed";
             dx.style.backgroundSize="cover";
         }else if (dy==4){
             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174129773-2085975677.jpg) no-repeat fixed";
             dx.style.backgroundSize="cover";
         }else if (dy==5){
             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170604142640446-727563678.png) no-repeat fixed";
             dx.style.backgroundSize="cover";
         }else if (dy==6){
             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202111434-1989193791.jpg) no-repeat fixed";
             dx.style.backgroundSize="cover";
         }else if (dy==7){
             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202419872-817092701.png) no-repeat fixed";             dx.style.backgroundSize="cover";
         }else if (dy==8){
             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902151832593-2122003193.jpg) no-repeat fixed";
             dx.style.backgroundSize="cover";
         }else if (dy==9){
             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152019140-1762402367.jpg) no-repeat fixed";
             dx.style.backgroundSize="cover";
         }else if (dy==10){
             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152127562-2119838736.jpg) no-repeat fixed";
             dx.style.backgroundSize="cover";
         }else if (dy==11){
             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152205765-1481629031.jpg) no-repeat fixed";
             dx.style.backgroundSize="cover";
         }else if (dy==12){
             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152237077-878421384.jpg) no-repeat fixed";
             dx.style.backgroundSize="cover";
         }else if (dy==13){
             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152325140-1207335922.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
         }else if (dy==14){
             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152342718-1503887682.jpg) no-repeat fixed";
             dx.style.backgroundSize="cover";
         }
     }
     ChangePicture();
 </script>

 </body>
 </html>
复制代码

上面是我正在用的失败代码，从大佬那嫖的，不知道那里出错了...

留一下网址博客园自定义页面风格设计 - Angel_Kitty - 博客园 (cnblogs.com)

还是老老实实学css吧...

下面是黑客背景代码

#matrix{position: fixed; top:0; left: 0; z-index: -1; opacity:0.8;}

页首代码

复制代码
<canvas id="matrix"></canvas>
<script type="text/javascript">

    //文字
    var txts = "0123456789!@#$%^&*()~_+℃☆○※";
    //转为数组
    txts = txts.split("");
    var matrix=document.getElementById("matrix");
    var context=matrix.getContext("2d");
    matrix.height=window.innerHeight;
    matrix.width=window.innerWidth;
    var drop=[];
    var font_size=16;
    var columns=matrix.width/font_size;
    for(var i=0;i<columns;i++)
        drop[i]=1;

    function drawMatrix(){

        context.fillStyle="rgba(0, 0, 0, 0.09)";
        context.fillRect(0,0,matrix.width,matrix.height);


        context.fillStyle="green";
        context.font=font_size+"px";
        for(var i=0;i<columns;i++){
            //随机取要输出的文字
            var text = txts[Math.floor(Math.random()*txts.length)];
            //输出文字，注意坐标的计算
            context.fillText(text,i*font_size,drop[i]*font_size);/*get 0 and 1*/

            if(drop[i]*font_size>(matrix.height*2/3)&&Math.random()>0.95)/*reset*/
                drop[i]=0;
            drop[i]++;
        }
    }
    setInterval(drawMatrix,33);
</script>
复制代码

 

posted @   AD2017  阅读(40)  评论(0)  编辑  收藏  举报
相关博文：
· 提问的艺术？？？
· 特殊密码锁
· 博客园美化代码
· 博客园美化
· 博客园美化
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示