Pure CSS marching ants border

Developer
Gregor Adams
Size
3,837 Kb
Views
190,256
  1. Pure CSS marching ants border Previews
  2. Pure CSS marching ants border HTML Codes
  3. Pure CSS marching ants border CSS Codes

How do I make an pure css marching ants border?

A simple marching ants border in pure CSS (no extra markup needed). What is a pure css marching ants border? How do you make a pure css marching ants border? This script and codes were developed by Gregor Adams on 20 June 2022, Monday.

Pure CSS marching ants border Previews
IQ Test

Pure CSS marching ants border - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>pure CSS marching ants border</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="headline marching-ants marching">One element marching ants border in pure CSS</h1>
<div class="page"> <div class="inline marching-ants bnw">Hover me to see my boder move.</div> <div class="inline marching-ants bnw reverse">My border moves in the other direction if you hover me.</div> <div class="info marching-ants"> <h1>Hover me to see my border move</h1> <h2>NOW SUPPORTS FLUID BOXES </h2> <h3>AND CUSTOM STYLES </h3> </div> <div class="warning marching-ants marching"> <h1>Warning! Something went wrong</h1> </div>
</div>
<nav id="PENS" style="background-color:#f00;color:#fff"> <style>@import '//codepen.io/pixelass/pen/oiqzn.css'</style> <script> PENS = window.PENS || {} PENS.toggle = function(target){ document.getElementById('PENS').classList.toggle('open') } </script> <header onclick="PENS.toggle(this)">You might also like</header> <ul class="PENS-list"> <li class="PENS-list-item item-0"><a href="/pixelass/pen/KleqJ/right/?editors=010" target="blank"> <iframe src="/pixelass/fullcpgrid/KleqJ" scrolling="no"></iframe></a></li> <li class="PENS-list-item item-1"><a href="/pixelass/pen/dysEe/right/?editors=010" target="blank"> <iframe src="/pixelass/fullcpgrid/dysEe" scrolling="no"></iframe></a></li> </ul>
</nav>
</body>
</html>

Pure CSS marching ants border - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Rajdhani:300,400);
.marching-ants { padding: 7px; margin: 20px; background-size: 20px 2px, 20px 2px, 2px 20px, 2px 20px; background-position: 0 0, 0 100%, 0 0, 100% 0; background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; -webkit-animation: marching-ants-1 1s; animation: marching-ants-1 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-play-state: paused; animation-play-state: paused;
}
.marching-ants:hover, .marching-ants.marching { -webkit-animation-play-state: running; animation-play-state: running;
}
.marching-ants.reverse { -webkit-animation-direction: reverse; animation-direction: reverse;
}
.marching-ants.bnw { background-image: -webkit-linear-gradient(left, #fff 50%, #000 50%), -webkit-linear-gradient(left, #fff 50%, #000 50%), -webkit-linear-gradient(top, #fff 50%, #000 50%), -webkit-linear-gradient(top, #fff 50%, #000 50%); background-image: linear-gradient(to right, #fff 50%, #000 50%), linear-gradient(to right, #fff 50%, #000 50%), linear-gradient(to bottom, #fff 50%, #000 50%), linear-gradient(to bottom, #fff 50%, #000 50%);
}
.marching-ants.headline { background-image: -webkit-linear-gradient(left, #fff 50%, #444 50%), -webkit-linear-gradient(left, #fff 50%, #444 50%), -webkit-linear-gradient(top, #fff 50%, #444 50%), -webkit-linear-gradient(top, #fff 50%, #444 50%); background-image: linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%); color: #fff;
}
.marching-ants.info { background-image: -webkit-linear-gradient(left, #dd2 50%, transparent 50%), -webkit-linear-gradient(left, #dd2 50%, transparent 50%), -webkit-linear-gradient(top, #dd2 50%, transparent 50%), -webkit-linear-gradient(top, #dd2 50%, transparent 50%); background-image: linear-gradient(to right, #dd2 50%, transparent 50%), linear-gradient(to right, #dd2 50%, transparent 50%), linear-gradient(to bottom, #dd2 50%, transparent 50%), linear-gradient(to bottom, #dd2 50%, transparent 50%); background-color: #ffa; color: #dd2;
}
.marching-ants.warning { padding: 9px; margin: 20px; background-size: 40px 4px, 40px 4px, 4px 40px, 4px 40px; background-position: 0 0, 0 100%, 0 0, 100% 0; background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; -webkit-animation: marching-ants-2 2s; animation: marching-ants-2 2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-play-state: paused; animation-play-state: paused; background-image: -webkit-linear-gradient(left, #f00 50%, #fff 50%), -webkit-linear-gradient(left, #f00 50%, #fff 50%), -webkit-linear-gradient(top, #f00 50%, #fff 50%), -webkit-linear-gradient(top, #f00 50%, #fff 50%); background-image: linear-gradient(to right, #f00 50%, #fff 50%), linear-gradient(to right, #f00 50%, #fff 50%), linear-gradient(to bottom, #f00 50%, #fff 50%), linear-gradient(to bottom, #f00 50%, #fff 50%); color: #a00; background-color: #faa;
}
.marching-ants.warning:hover, .marching-ants.warning.marching { -webkit-animation-play-state: running; animation-play-state: running;
}
.marching-ants.warning.reverse { -webkit-animation-direction: reverse; animation-direction: reverse;
}
@-webkit-keyframes marching-ants-1 { 0% { background-position: 0 0, 0 100%, 0 0, 100% 0; } 100% { background-position: 40px 0, -40px 100%, 0 -40px, 100% 40px; }
}
@keyframes marching-ants-1 { 0% { background-position: 0 0, 0 100%, 0 0, 100% 0; } 100% { background-position: 40px 0, -40px 100%, 0 -40px, 100% 40px; }
}
@-webkit-keyframes marching-ants-2 { 0% { background-position: 0 0, 0 100%, 0 0, 100% 0; } 100% { background-position: 40px 0, -40px 100%, 0 -40px, 100% 40px; }
}
@keyframes marching-ants-2 { 0% { background-position: 0 0, 0 100%, 0 0, 100% 0; } 100% { background-position: 40px 0, -40px 100%, 0 -40px, 100% 40px; }
}
@-webkit-keyframes marching-ants-3 { 0% { background-position: 0 0, 0 100%, 0 0, 100% 0; } 100% { background-position: 40px 0, -40px 100%, 0 -40px, 100% 40px; }
}
@keyframes marching-ants-3 { 0% { background-position: 0 0, 0 100%, 0 0, 100% 0; } 100% { background-position: 40px 0, -40px 100%, 0 -40px, 100% 40px; }
}
body { font-family: 'Rajdhani'; background-color: #444;
}
.page { max-width: 800px; margin: auto; padding: 20px; background-color: #fff;
}
Pure CSS marching ants border - Script Codes
Pure CSS marching ants border - Script Codes
Home Page Home
Developer Gregor Adams
Username pixelass
Uploaded June 20, 2022
Rating 4.5
Size 3,837 Kb
Views 190,256
Do you need developer help for Pure CSS marching ants border?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gregor Adams (pixelass) Script Codes
Name
Netfix logo animation CSS
Google dots animation
Material button pure CSS
Fractal tree
Text stroke helpers for SCSS
Numbers cube counter
Diagonal scroll
3D Particle Heart
SVG sine wave
Morphing search input
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!