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

Question

[Alexander]

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

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



Ребят подскажите примерную реализацию, или тыкните туда где можно почитать. т.к гугл ничего толкового по теме мне не выдал :(

Answer 1

[gleendo]

SVG анимациия, самое легкое что можно сделать

Comments

[Максим]

нее , я у тебя научился на codepen , смотри мой пример

[gleendo]

Максим Жаров: Всм у меня научился?

[Максим]

evg_: да , ты не знаешь просто

[gleendo]

Максим Жаров: да это не утверждающий вопрос. Ты написал что научился у меня. Что это значит? Как понять научился на codepen? Поясни пожалуйста свое высказывание. Суть уловить не могу.

[Максим]

evg_: смотрел примеры и запоминал

[gleendo]

Максим Жаров: А при чем тут я?) на моей codepen или что вообще? не догоняю. Не понял сути вашего ответа на мой ответ на вопрос ТС.
И ваш пример ну никак не является решением которое нужно ТС. Вообще не в тему ваш ответ если честно)

[Максим]

evg_: проехали

Answer 2

[GreatRash]

border-image - неполный бордер можно при помощи её же сделать.

Answer 3

[blolg]

SVG анимация
vivus
DrawSVGPlugin

Answer 4

[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>

Answer 5

[_ _]

1. Использовать border-image с gradient и анимировать его.
2. Использовать блоки :before и :after. У основного блока бордеры заданы так - левый и верхний серые, правый и нижний нужного вам цвета. Блок :before с нулевыми размерами, position: absolute в левый верхний угол, верхний и левый бордеры нужного вам цвета, блок :after в правый нижний угол, ширина и высота по родительскому блоку, цвет бордера серый.
При наведении анимируете размеры блока :before до 100% родительского блока, блока :after до 0. Задержку анимации блока :after делаете такой, чтобы она начинала срабатывать сразу после завершения анимации :before.
Получится, что блок :before расширяясь зальет бордером нужного цвета левую и правую стороны, а блок :after сжимаясь уберет серый бордер и откроет лежащий внизу бордер нужного цвета справа и внизу.

Answer 6

[Антон Федорян]

https://jsfiddle.net/slippyk/1h8c8x95/4/