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

本文主要是介绍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%;}
}

这篇关于7、css3实现边框不停地跑动效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！