Заливка блока анимированным бордером?

Есть блок, 200 на 50 пикселей. У которого должен быть задан верхний и левый угол бордером, но не до конца, а скажем всего на 50% и при ховере на него он должен заливаться бордером до конца, с обох сторон, плавно.

Для наглядности,

c5515e70adb9450bb8004614f77796cd.png

Ребят подскажите примерную реализацию, или тыкните туда где можно почитать. т.к гугл ничего толкового по теме мне не выдал :(
  • Вопрос задан
  • 614 просмотров
Пригласить эксперта
Ответы на вопрос 6
evgeniy8705
@evgeniy8705
Повелитель вселенной
SVG анимациия, самое легкое что можно сделать
Ответ написан
@GreatRash
border-image - неполный бордер можно при помощи её же сделать.
Ответ написан
Комментировать
@blolg
SVG анимация
vivus
DrawSVGPlugin
Ответ написан
Комментировать
@ArturArturov
лучше svg, но можно и css
<div class="qwe">
        qweqwe
    </div>
    <style>
        .qwe{
            display: inline-block;
            padding: 20px;
            border: 2px solid lightgray;
            position: relative;
        }
        .qwe:before,
        .qwe:after{
            content: '';
            display: block;
            position: absolute;
            top: -2px;
            left: -2px;
            width: 0;
            height: 0;
        }
        .qwe:before{
            border-left: 0 solid green;
            border-bottom: 0 solid green;
        }
        .qwe:after{
            border-top: 0 solid green;
            border-right: 0 solid green;
        }
        .qwe:hover:before,
        .qwe:hover:after{
            border-width: 2px;
            height: calc(100% + 4px);
            width: calc(100% + 4px);
        }
        .qwe:hover:before{
            transition: height 1s linear , width 1s 1s linear ;
        }
        .qwe:hover:after{
            transition: width 1s linear , height 1s 1s linear ;
        }
    </style>
Ответ написан
Комментировать
AMar4enko
@AMar4enko
1. Использовать border-image с gradient и анимировать его.
2. Использовать блоки :before и :after. У основного блока бордеры заданы так - левый и верхний серые, правый и нижний нужного вам цвета. Блок :before с нулевыми размерами, position: absolute в левый верхний угол, верхний и левый бордеры нужного вам цвета, блок :after в правый нижний угол, ширина и высота по родительскому блоку, цвет бордера серый.
При наведении анимируете размеры блока :before до 100% родительского блока, блока :after до 0. Задержку анимации блока :after делаете такой, чтобы она начинала срабатывать сразу после завершения анимации :before.
Получится, что блок :before расширяясь зальет бордером нужного цвета левую и правую стороны, а блок :after сжимаясь уберет серый бордер и откроет лежащий внизу бордер нужного цвета справа и внизу.
Ответ написан
Комментировать
AnnTHony
@AnnTHony
Интроверт
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SPIKS Санкт-Петербург
от 70 000 до 90 000 ₽
PERX Нижний Новгород
До 50 000 ₽