Здравствуйте! Да, такую анимацию можно создать, и я с радостью помогу вам с этим.
Когда я говорю о "верхней границе экрана", я имею в виду область в верхней части видимой части вашего интерфейса, где начинается анимация круга. То есть круг будет появляться за пределами верхней границы видимой части экрана и будет падать вниз в область, где находится ваш инпут.
Вот несколько шагов, как можно реализовать такую анимацию:
1. **Создание элементов**: Вам понадобятся два HTML-элемента – круг и иконка лупы.
2. **Стиль и начальная позиция**: Установите круг так, чтобы он начинался за верхним краем экрана (например, с помощью `position: absolute; top: -50px;`).
3. **Анимация**: Используйте CSS или JavaScript, чтобы анимировать падение круга вниз. Это можно сделать с помощью CSS-анимаций или с использованием библиотеки анимации.
4. **Преобразование в лупу**: Как только круг достигнет инпута, его нужно будет трансформировать в иконку лупы. В CSS-анимация свойств (например, `width`, `height`, `border-radius`, `background`, и т. д.) поможет сделать это.
5. **Скрытие круга**: Прежде чем круг станет видимым, его нужно будет скрыть или переместить вне экрана. Это можно сделать с помощью `display: none;` или `visibility: hidden;`. Если вы используете анимацию с JavaScript, можно управлять позициями элементов динамически.
Вот примерный код для реализации:
### HTML
```html
<div id="input-container">
<input type="text" id="search-input" placeholder="Поиск...">
<div id="circle"></div>
<div id="magnifying-glass" style="display:none;">🔍</div>
</div>
```
### CSS
```css
#input-container {
position: relative;
}
#circle {
position: absolute;
top: -50px; /* Начальная позиция вверху */
left: 50%; /* Центрирование по горизонтали */
transform: translateX(-50%);
width: 50px;
height: 50px;
background: blue; /* Цвет круга */
border-radius: 50%;
transition: all 0.5s ease;
}
#magnifying-glass {
position: absolute;
top: 50%; /* Позиционирование лупы */
left: 50%;
transform: translate(-50%, -50%);
}
```
### JavaScript
```javascript
const input = document.getElementById('search-input');
const circle = document.getElementById('circle');
const magnifyingGlass = document.getElementById('magnifying-glass');
input.addEventListener('focus', () => {
circle.style.top = '100px'; // Настройте на нужное положение
circle.style.transition = 'top 0.5s ease';
// По истечении анимации
setTimeout(() => {
circle.style.display = 'none'; // Скрыть круг
magnifyingGlass.style.display = 'block'; // Показать лупу
}, 500); // Время анимации
});
```
Этот пример кода создает базовую анимацию. Вам, возможно, придется настроить его для более плавной анимации и корректного позиционирования. Надеюсь, это поможет вам! Если у вас есть дополнительные вопросы, не стесняйтесь задавать.