<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
body{
padding:120px;
}
.mainbox{
width:320px;
height:320px;
position:relative;
/*超出隐藏需要加上*/
overflow:hidden;
}
.content{
width:320px;
height:320px;
line-height:320px;
text-align:center;
background-color:#cde;
}
.line{
/*结合外层元素的相对定位*/
position:absolute;
}
.line:nth-child(1){
top:0;
left:0;
width:100%;
height:3px;
/*加上渐变效果，方可形成拖尾效果*/
background:linear-gradient(90deg,transparent,orange);
animation:animate18slinearinfinite;
}
/*分别控制其上下左右的定位距离，从而形成线条跟随效果*/
@keyframesanimate1{
0%{
left:-100%;
}
50%,
100%{
left:100%;
}
}
.line:nth-child(2){
top:-100%;
right:0;
width:3px;
height:100%;
background:linear-gradient(180deg,transparent,red);
animation:animate28slinearinfinite;
/*注意要加上延时触发动画效果，这样线条才会依次触发*/
animation-delay:2s;
}
@keyframesanimate2{
0%{
top:-100%;
}
50%,
100%{
top:100%;
}
}
.line:nth-child(3){
bottom:0;
right:0;
width:100%;
background:linear-gradient(270deg,transparent,green);
animation:animate38slinearinfinite;
animation-delay:4s;
}
@keyframesanimate3{
0%{
right:-100%;
height:3px;
}
50%,
100%{
height:2px;
right:100%;
}
}
.line:nth-child(4){
bottom:-100%;
left:0;
width:3px;
height:100%;
background:linear-gradient(360deg,transparent,#3a86ff);
animation:animate48slinearinfinite;
animation-delay:6s;
}
@keyframesanimate4{
0%{
bottom:-100%;
}
50%,
100%{
bottom:100%;
}
}
</style>
</head>
<body>
<divclass="mainbox">
<spanclass="line"></span>
<spanclass="line"></span>
<spanclass="line"></span>
<spanclass="line"></span>
<divclass="content">线条环绕</div>
</div>
</body>
</html>
|
运行时间载入中.....