Как анимировать градиентную рамку на фокусе ввода? - PullRequest
Новая
       18

Как анимировать градиентную рамку на фокусе ввода?

0 голосов
/ 28 мая 2019

Я пытаюсь анимировать градиентную границу в фокусе ввода. Пример ниже - это то, чего я хочу достичь, но как я могу расширить его до границы градиента?

Спасибо за любую помощь! 

:focus{outline: none;}

.wrapper{position: relative; width:200px}
input[type="text"]{width: 100%; box-sizing: border-box}

.effect-9 ~ .focus-border:before,
.effect-9 ~ .focus-border:after{content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.2s; transition-delay: 0.2s;}
.effect-9 ~ .focus-border:after{top: auto; bottom: 0; right: auto; left: 0; transition-delay: 0.6s;}
.effect-9 ~ .focus-border i:before,
.effect-9 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; transition: 0.2s;}
.effect-9 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0; transition-delay: 0.4s;}
.effect-9:focus ~ .focus-border:before,
.effect-9:focus ~ .focus-border:after{width: 100%; transition: 0.2s; transition-delay: 0.6s;}
.effect-9:focus ~ .focus-border:after{transition-delay: 0.2s;}
.effect-9:focus ~ .focus-border i:before,
.effect-9:focus ~ .focus-border i:after{height: 100%; transition: 0.2s;}
.effect-9:focus ~ .focus-border i:after{transition-delay: 0.4s;}
<div class="wrapper">
  <input class="effect-9" type="text">
  <span class="focus-border">
    <i></i>
  </span>
</div>

1 Ответ

0 голосов
/ 29 мая 2019 
:focus{outline: none;}

.wrapper{position: relative; width:500px; }
input[type="text"]{width: 100%; height: 60px; box-sizing: border-box;font-size: 20px; padding: 0 10px;}

.effect-9 ~ .focus-border:before,
.effect-9 ~ .focus-border:after{content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background: linear-gradient(to right, rgba(75,105,142,0.65) 0%,rgba(0,0,0,0) 100%); transition: 0.2s; transition-delay: 0.2s;}
.effect-9 ~ .focus-border:after{top: auto; bottom: 0; right: auto; left: 0; transition-delay: 0.6s;}
.effect-9 ~ .focus-border i:before,
.effect-9 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background: linear-gradient(to bottom, rgba(75,105,142,0.65) 0%,rgba(0,0,0,0) 100%); transition: 0.2s;}
.effect-9 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0; transition-delay: 0.4s;}
.effect-9:focus ~ .focus-border:before,
.effect-9:focus ~ .focus-border:after{width: 100%; transition: 0.2s; transition-delay: 0.6s;}
.effect-9:focus ~ .focus-border:after{transition-delay: 0.2s;}
.effect-9:focus ~ .focus-border i:before,
.effect-9:focus ~ .focus-border i:after{height: 100%; transition: 0.2s;}
.effect-9:focus ~ .focus-border i:after{transition-delay: 0.4s;}

проверь, если это то, что ты ищешь, сделал некоторые изменения высоты и ширины для видимости

...