Как анимировать border input'а?
237
13 апреля 2022, 10:00
Есть вот такая форма:
Хочу, чтобы при нажатии на input Имя и E-mail плавно появлялись остальные бордеры, но не знаю как реализовать задумку. Сама проблема в том, что где-то видел как бордеры от нижнего по бокам поднимаются, а потом соединяются сверху в середине и хотелось бы сделать также.
Как такое реализовать?
Answer 1
Один из вариантов - использовать анимацию градиента:
.ani-border {
padding: 1em;
border: none; outline: 2px solid transparent;
background-image:
linear-gradient(to bottom, #cacaca 1px, transparent 1px),
linear-gradient(to bottom, #cacaca 1px, transparent 1px),
linear-gradient(to right, #cacaca 1px, transparent 1px, transparent calc(100% - 1px), #cacaca calc(100% - 1px)),
linear-gradient(to top, #cacaca 1px, transparent 1px);
background-position: -100% 0%, 200% 0%, 0% 100%, 0% 100%;
background-size: 50% 100%, 50% 100%, 100% 1px, 100% 100%;
background-repeat: no-repeat;
transition: background-size .4s ease-out .6s, background-position .6s ease-in;
}
.ani-border:focus {
background-position: 0% 0%, 100% 0%, 0% 100%, 0% 100%;
background-size: 51% 100%, 51% 100%, 100% 100%, 100% 100%;
transition: background-size .4s ease-in, background-position .6s ease-out .4s;
}<input class="ani-border" placeholder="E-mail">
-
11:24
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47559 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30495 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23628 visits
- Как через css изменить цвет png изображения? 10349 visits
- Blob video url download 9958 visits
- Php curl запрос через прокси с авторизацией 9209 visits
- Работа с captcha vk api 8093 visits
© "hostciti.net" 22.11.2024 | 13:42