У этого блока вращающаяся разноцветная рамка.
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>
(из-за чертовых спамеров урлы в коментах теперь писать нельзя)
Комментариев нет