Помните, раньше в 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 пиксельный прозрачный бордер. Это нужно для того, чтобы оттеснить белый фон нашего блока (цвет бекграунда может быть любым).
Затем мы задаём главный фон (нашего элемента, а потом добавляем повторяющийся градиентный фон для муравьём.
Ну и собстенно добавляем анимацию.
Готово!