效果例图：
1、上html代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./3.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box">
中国云南昆明
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</body>
</html>
2、上css代码：
.container{
width: 800px;
height: 680px;
margin: 20px auto;
position: relative;
}
.box{
width: 420px;
height: 210px;
margin: 100px auto;
line-height: 210px;
text-align: center;
font-size: 40px;
position: relative;
overflow: hidden;
border: 1px solid #eee;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 700;
letter-spacing: 0.6em;
}
.line{
position: absolute;
}
.line:nth-child(1){
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg,transparent, #008c8c);
animation: move1 8s linear infinite;
}
@keyframes move1 {
0%{
left: -100%;
}
50%,
100%{
left: 100%;
}
}
.line:nth-child(2){
top: -100%;
right: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg,transparent, #008c8c);
animation: move2 8s linear infinite;
animation-delay: 2s;
}
@keyframes move2 {
0%{
top: -100%;
}
50%,
100%{
top: 100%;
}
}
.line:nth-child(3){
bottom: 0;
right: -100%;
width: 100%;
height: 4px;
background: linear-gradient(270deg,transparent, #008c8c);
animation: move3 8s linear infinite;
animation-delay: 4s;
}
@keyframes move3 {
0%{
right: -100%;
}
50%,
100%{
right: 100%;
}
}
.line:nth-child(4){
bottom: -100%;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(360deg,transparent, #008c8c);
animation: move4 8s linear infinite;
animation-delay: 6s;
}
@keyframes move4 {
0%{
bottom: -100%;
}
50%,
100%{
bottom: 100%;
}
}
