7、css3实现边框不停地跑动效果

效果例图：

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%;}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/845527.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！