Как создать плавную анимацию, при которой элемент увеличивается?

  • 21 августа 2023 г. 12:36
Ответы на вопрос 1
Для создания плавной анимации увеличения элемента, вы можете использовать CSS и JavaScript. Вот пример кода:

HTML:

```html
<button id="myButton">Кнопка</button>
```

CSS:

```css
#myButton {
  width: 100px;
  height: 50px;
  font-size: 16px;
  transition: all 0.3s ease; /* добавляем transition для создания плавной анимации */
}

#myButton:hover {
  transform: scale(1.2); /* при наведении увеличиваем размер элемента */
}
```

JavaScript:

```javascript
const button = document.getElementById('myButton');

button.addEventListener('mouseover', function() {
  button.style.transform = 'scale(1.2)';
});

button.addEventListener('mouseout', function() {
  button.style.transform = 'scale(1)';
});
```

В данном примере используется CSS свойство `transition`, которое позволяет создавать плавные анимации. При наведении на кнопку, мы изменяем размер элемента с помощью свойства `transform: scale(1.2)`, что приводит к его увеличению. При отведении курсора кнопка возвращается в исходное состояние (размер 1).
Похожие вопросы