Для связи: dmitriyzhuravlev (гав-гав) yandex.ru

Персональный сайт Дмитрия Журавлева


Мой ЖЖ: dimadima.livejournal.com — там дубль, плюс коментов больше.

У этого блока вращающаяся разноцветная рамка.
Реализовал "движущийся" border благодаря блоку-подложке, который вращается с помощью transform: rotate().
У идеи есть минус - блок должен иметь фиксированные высоту и ширину, хотя, думается мне, если постараться, то можно и для нефиксированного что-то придумать, двигая margin, padding и т.п.
Используются ванильные CSS-переменные, без всяких SASS. Можно толщину движущейся рамки менять с помощью значения переменной --borderSize.

Т.к. используются CSS-переменные, то браузеры-динозавры не поддерживаются. Но если вручную задать значения, то и в старых браузерах заработает.

Ещё один вариант реализации - это блок, внутри которого двигаются 4 блока, прижатых к краям. Это уже не моя идея, но постараюсь и её реализовать.

HTML и CSS код внутри...

Комментариев нет

Страницы: 1