console 命令行工具 X clear

console

<!--作业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>
</head>
    <body>
     <div class="H">我的收藏</div>
     <div class="DY">我的电影推荐</div>
     <div class="DY">点击图片即可跳转</div>
<!--图片 开始-->
 <div id="BZ">
     
    <div class="A"><a href="https://www.bilibili.com/bangumi/play/ep311987?from=search&seid=15141087476992858820"><img src="http://image11.m1905.cn/uploadfile/2014/0710/20140710103323444954.jpg" width="500px" height="300px"/></a></div>
    
    <div class="B"><a href="https://www.bilibili.com/bangumi/play/ep316283?theme=movie"><img src="https://3img.hitv.com/preview/internettv/sp_images/ott/2016/dianying/48971/20160725201922313-new.jpg" width="500px" height="300px"></a></div>

    <div class="C"><a href="https://www.bilibili.com/bangumi/play/ss33358/?from=search&seid=12836425633654634350"><img src="https://n.sinaimg.cn/translate/703/w2048h1055/20190310/dGYX-htzuhtp5559817.jpg" width="500px" height="300px"></a></div>

    <div class="D"><a href="https://www.bilibili.com/bangumi/play/ep318890"><img src="https://puui.qpic.cn/qqvideo_ori/0/q05675me49f_496_280/0"></a></div>

    <div class="F"><a href="https://www.bilibili.com/bangumi/play/ep314361"><img src="https://img.douxie.com/upload/upload/2014/05/23/537ee6c563d42.jpg"></a></div>

 </div>
 <!--图片 结束-->





<div>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1344874921&auto=1&height=66"></iframe>
</div>  
    </body>
</html>

body {
    background:#333 ;
    color:aaa;
    text-align:center;
    background-color: #333;
}
.H{
 	color: #FFFFFF;
    font-size: 50px;
}
.DY{
    color: rgb(221, 45, 45);
    font-size: 20px;
}

/*框主要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;
    } */
/*框结束*/
.AA{
   
    }