Обводка «Бегущие муравьи» на CSS

Помните, раньше в Microsoft Word была обводка «бегущие муравьи»? Сегодня сделаем тоже только на CSS: Обводка «Бегущие муравьи» на CSS

С приходом CSS3 это стало возможно. Для того, чтобы это сделать, просто создадим keyframe анимацию background, в которой будет изменяться linear-gradient, и добавим его элементу.

@keyframes ants { to { background-position: 100% 100% } }

Анимацию ants добавили в CSS файл, теперь добавим эту анимацию к элементу:

.animated-block{
border: 1px solid transparent;
	background: linear-gradient(white, white) padding-box,
	            repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em;
	animation: ants 12s linear infinite;
}

Разберем немного код:

Сначала мы создаем 1 пиксельный прозрачный бордер. Это нужно для того, чтобы оттеснить белый фон нашего блока (цвет бекграунда может быть любым).

Затем мы задаём главный фон (нашего элемента, а потом добавляем повторяющийся градиентный фон для муравьём.

Ну и собстенно добавляем анимацию.

Готово!