Marching Ants HR CSS Code
This code creates a horizontal line () styled with a marching ants animation effect using pure CSS. The line appears to move continuously due to a repeating dashed gradient and an animated background position. It mimics the look of "marching ants" often used in selection borders in graphics software. Ideal for highlighting or separating sections on modern websites.
Example
Above the Line
Below the Line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Marching Ants HR</title>
<style>
hr.marching-ants {
border: none;
height: 2px;
background: repeating-linear-gradient(
90deg,
black 0 5px,
transparent 5px 10px
);
animation: moveAnts 0.5s linear infinite;
}
@keyframes moveAnts {
from {
background-position: 0 0;
}
to {
background-position: 10px 0;
}
}
</style>
</head>
<body>
<h2>Above the Line</h2>
<hr class="marching-ants">
<h2>Below the Line</h2>
</body>
</html>