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

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

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

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

CSS-код:

.withRotatingBorder {
	box-sizing: border-box;
	--myLength: 250px;
	--borderSize: 3px;
	--increser: calc(var(--myLength) / 1.5);
	width: calc(var(--myLength) + var(--borderSize) * 2);
	height: calc(var(--myLength) + var(--borderSize) * 2);
	background-color: #f0f2f4;
	position: relative;
	overflow: hidden;
	border: 0;
	padding: 0;
	margin: 0 auto;
}

.withRotatingBorder .rotatingBlock {
	width: calc(var(--myLength) + var(--increser));
	height: calc(var(--myLength) + var(--increser));
	background-image: linear-gradient(red 0%, #040404 5%, #f5d0e2 8%, orange 12%, #40d8a0 20%, #6688a5 30%, pink 40%, yellow 50%, green 62%, #f4d0e4 73%, teal 80%, red 90%, blue 100%);
	border: 0px solid black;
	animation: rotation 7s infinite normal linear;
	z-index: 1;
	position: absolute;
	top: calc(0px - var(--increser)/2 + var(--borderSize));
	left: calc(0px - var(--increser)/2 + var(--borderSize));
}

.withRotatingBorder .normalBlock {
	width: var(--myLength);
	height: var(--myLength);
	border: 0;
	margin: 0;
	box-sizing: border-box;
	background-color: #fafafa;
	font-size: 20px;
	font-family: sans-serif;
	padding: 5px;
	z-index: 2;
	position: absolute;
	top: var(--borderSize);
	left: var(--borderSize);
}

@keyframes rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

HTML-код:

<div class="withRotatingBorder">
	<div class="rotatingBlock">
	</div>
	<div class="normalBlock">
		У этого блока вращающаяся разноцветная рамка.
	</div>
</div>