console 命令行工具 X clear

console

window.onload = () => {
  
  
  Particles.init({
    selector: '.DT',
    maxParticles: 80,     
    sizeVariations: 6,       
    connectParticles: true,  
    speed: .8,               
    color: '#2EA1F4',        
    minDistance: 150,       
  })
  
}

<!--作业06戴玮 超链接网站1 我的相册-->
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/bootstrap.css">
    <title>我的喜欢的图片</title>
    <link rel="stylesheet" href="main.css">
  
</head>
<body>
<div class="AAA">我喜欢的图片</div>
 <!--图片 开始-->
 <div id="BZ">
    <div class="A"><img src="https://mod.3dmgame.com/static/upload/mod/201806/MOD5b359a660b4b4.jpg" width="500px" height="300px"/></div>
    <div class="B"><img src="https://images5.alphacoders.com/102/1022372.jpg" width="500px" height="300px"></div>
    <div class="C"><img src="https://img.3dmgame.com/uploads/images/news/20181214/1544750872_896020.jpg" width="500px" height="300px"></div>
    <div class="D"><img src="https://www.3dmgame.com/uploads/allimg/180615/226_180615142214_1.jpg" width="500px" height="300px"></div>
    <div class="F"><img src="https://pic2.zhimg.com/v2-02099e703f1f1c037745f6ff50ec7a7e_r.jpg" width="500px" height="300px"></div>
    <div class="G"><img src="http://img.gawkerassets.com/post/9/2013/01/cyberpunk-2077-teaser-3.gif" width="500px" height="300px"></div>
 </div>
 <!--图片 结束-->

<!--动态壁纸 开始-->
    <script src="https://lib.baomitu.com/particlesjs/2.2.3/particles.min.js"></script>
  <div class="DT-Z" oncontextmenu="javascript:return false;">
   <canvas class="DT"></canvas>
 </div>

<!--动态壁纸 结束-->

<!--网页内播放器开始-->
  <!-- <div class="BFQDD">
  <div class="BFQTS">secret base</div>
  <audio autoplay="controls" controls="controls"loop="loop" preloda="auto" src="" ></audio> -->
  
  
  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1311353937&auto=1&height=66"></iframe>
  <div class="BFQTS">若无法使用则您的浏览器版本过低，无法支持该项目，请更新或重新下载浏览器并重试，若无法解决请联系，谢谢。</div>
  </div>
  
  <!--网页内播放器结束-->
  <div>
      <script language="javascript">
       alert("20206/29更新!!网站因未知原因，加载时间过长!!，网站的音乐链接是会失效的，所以如果没有音乐可能是网站的变更，与本身代码没有关系/20206/29更新重要!!!!!/应本身音乐问题已更换为网易云来实现，本身打算使用原本的代码设计但大部分的音乐网站的音乐链接会时时变动，无法保证音乐的正常播放，于是更换更为稳定的方式实现")
      </script>
  </div>
 

</body>
 
    </html>

body {
    background:#333 ;
    color:aaa;
    text-align:center;
}
.AAA{
    color: #FFFFFF;
    font-size: 50px;
}
/*音乐播放器提示设置 开始*/
.BFQDD{
    text-align:center;
    color: #e67e1f
}

BFQTS{
    text-align:center;
    color: #e67e1f
}
/*音乐播放器提示设置 结束*/

/*框主要1*/
.A{
    /*接对定位*/
    position:relative;
    /*大小与图片一致width:500px;height:300px;*/
	width:500px;height:300px;
    /*边缘*/
	margin:80px auto;z-index:3;
}
/*第一条线*/
.A::before{
    content:'';position:absolute;
	left:0;top:0;bottom:0;right:0;
    /*调整线的大小颜色*/
	border:2px solid rgb(230, 11, 76);margin:-10px;z-index:-1;		
	clip:rect(0,500px,300px,10px);
	animation:lineA 3s linear infinite;
}
/*第二条线*/
.A::after{content:'';position:absolute;
	left:0;top:0;bottom:0;right:0;
    /*调整线的大小颜色*/
	border:2px solid Blue;margin:-10px;z-index:-1;		
	clip:rect(0,500px,300px,10px);
	animation:lineB 6s linear infinite;
    }
@keyframes lineA{   
                    /* 左边  顶部  底部   右边           */      	
	0%,100%{clip:rect(0px,600px,20px,0px)}    

	 25%{clip:rect(0px,600px,600px,0px)} 

	50%{clip:rect(0px,0px,0px,0px)} 

	 75%{clip:rect(0px,0px,0px,0px)}     
    }
@keyframes lineB{    	
	 0%,100%{clip:rect(0px,0px,0px,0px)} 

	 25%{clip:rect(0px,0px,0px,0px)}  

	50%{clip:rect(0px,600px,20px,0px)}

	 75%{clip:rect(0px,600px,20px,0px)} 
    }

/*框主要2*/
.B{
    /*接对定位*/
    position:relative;
    /*大小与图片一致width:500px;height:300px;*/
	width:500px;height:300px;
    /*边缘*/
	margin:80px auto;z-index:3;
}
/*第一条线*/
.B::before{
    content:'';position:absolute;
	left:0;top:0;bottom:0;right:0;
    /*调整线的大小颜色*/
	border:2px solid rgb(230, 11, 76);margin:-10px;z-index:-1;		
	clip:rect(0,500px,300px,10px);
	animation:lineA 3s linear infinite;
}
/*第二条线*/
.B::after{content:'';position:absolute;
	left:0;top:0;bottom:0;right:0;
    /*调整线的大小颜色*/
	border:2px solid Blue;margin:-10px;z-index:-1;		
	clip:rect(0,500px,300px,10px);
	animation:lineB 6s linear infinite;
    }

/*框主要3*/
.C{
    /*接对定位*/
    position:relative;
    /*大小与图片一致width:500px;height:300px;*/
	width:500px;height:300px;
    /*边缘*/
	margin:80px auto;z-index:3;
}
.C::before{
    content:'';position:absolute;
	left:0;top:0;bottom:0;right:0;
    /*调整线的大小颜色*/
	border:2px solid rgb(230, 11, 76);margin:-10px;z-index:-1;		
	clip:rect(0,500px,300px,10px);
	animation:lineA 3s linear infinite;
}
/*第二条线*/
.C::after{content:'';position:absolute;
	left:0;top:0;bottom:0;right:0;
    /*调整线的大小颜色*/
	border:2px solid Blue;margin:-10px;z-index:-1;		
	clip:rect(0,500px,300px,10px);
	animation:lineB 6s linear infinite;
    }

/*框主要4*/
.D{
    /*接对定位*/
    position:relative;
    /*大小与图片一致width:500px;height:300px;*/
	width:500px;height:300px;
    /*边缘*/
	margin:80px auto;z-index:3;
}
.D::before{
    content:'';position:absolute;
	left:0;top:0;bottom:0;right:0;
    /*调整线的大小颜色*/
	border:2px solid rgb(230, 11, 76);margin:-10px;z-index:-1;		
	clip:rect(0,500px,300px,10px);
	animation:lineA 3s linear infinite;
}
/*第二条线*/
.D::after{content:'';position:absolute;
	left:0;top:0;bottom:0;right:0;
    /*调整线的大小颜色*/
	border:2px solid Blue;margin:-10px;z-index:-1;		
	clip:rect(0,500px,300px,10px);
	animation:lineB 6s linear infinite;
    }

/*框主要5*/
.F{
    /*接对定位*/
    position:relative;
    /*大小与图片一致width:500px;height:300px;*/
	width:500px;height:300px;
    /*边缘*/
	margin:80px auto;z-index:3;
}
.F::before{
    content:'';position:absolute;
	left:0;top:0;bottom:0;right:0;
    /*调整线的大小颜色*/
	border:2px solid rgb(230, 11, 76);margin:-10px;z-index:-1;		
	clip:rect(0,500px,300px,10px);
	animation:lineA 3s linear infinite;
}
/*第二条线*/
.F::after{content:'';position:absolute;
	left:0;top:0;bottom:0;right:0;
    /*调整线的大小颜色*/
	border:2px solid Blue;margin:-10px;z-index:-1;		
	clip:rect(0,500px,300px,10px);
	animation:lineB 6s linear infinite;
    }

/*框主要6*/
.G{
    /*接对定位*/
    position:relative;
    /*大小与图片一致width:500px;height:300px;*/
	width:500px;height:300px;
    /*边缘*/
	margin:80px auto;z-index:3;
}
.G::before{
    content:'';position:absolute;
	left:0;top:0;bottom:0;right:0;
    /*调整线的大小颜色*/
	border:2px solid rgb(230, 11, 76);margin:-10px;z-index:-1;		
	clip:rect(0,500px,300px,10px);
	animation:lineA 3s linear infinite;
}
/*第二条线*/
.G::after{content:'';position:absolute;
	left:0;top:0;bottom:0;right:0;
    /*调整线的大小颜色*/
	border:2px solid Blue;margin:-10px;z-index:-1;		
	clip:rect(0,500px,300px,10px);
	animation:lineB 6s linear infinite;
    }
/*框结束*/


/*动态壁纸 开始*/
DT-Z{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background: #717de9;
  animation: radxp 30.2s linear infinite alternate;
  /* background-position: center */
}
@keyframes radxp {
  100% {
    background: #0a91d4;
  }CSS
/*动态壁纸 结束*/

SOURCE

本项目引用的自定义外部资源