Анимация элементов на сайте с помощью CSS

Содержимое статьи:

• Разъезд и наклон черных кружков при наведении

Разъезд и наклон черных кружков при наведении

Простой способ:

• Сохранить каждый кружок как отдельный элемент
• Использовать margin для начального расположения
• При наведении применять transform: translate() и rotate() для каждого кружка
  Более элегантный способ: Использовать transform и background-image для создания кружков:
  
  1. Создать родительский элемент с изображением кружков в качестве фона
  2. Задать для родительского элемента начальный transform, чтобы расположить кружки по кругу
  3. При наведении на родительский элемент применять transform: scale() для раздвижения кружков и transform: rotate() для изменения их наклона
     Пример кода:

     /* Родительский элемент */
     
     .container {
     
     height: 100px;
     
     width: 100px;
     
     background-image: url(circles.png);
     
     background-repeat: no-repeat;
     
     background-size: contain;
     
     transform: rotate(15deg);
     
     }
     
     /* Состояние наведения */
     
     .container:hover {
     
     transform: scale(1.2) rotate(25deg);
     
     }