css实现流动的虚线(虚线流动)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.line {
width: 200px;
height:1px;
background: repeating-linear-gradient(135deg, transparent, transparent 3px, #000 3px, #000 10px);
animation: leftToRight 1s infinite linear;
overflow: hidden;
}
@keyframes rightToLeft {
0% { background-position: -1px -1px;}
100% { background-position: -12px -12px;}
}
@keyframes leftToRight {
0% { background-position: -12px -12px;}
100% { background-position: -1px -1px;}
}
</style>
</head>
<body>
<div class="line"></div>
</body>
</html>
