Анимация
Animate.css v4в
image alt
Заголовок для демо анимации
Кнопка
image alt
Заголовок для демо анимации
Кнопка
Заголовок для демо анимации
Заголовок для демо анимации
Заголовок для демо анимации
Заголовок для демо анимации
Заголовок для демо анимации
Заголовок для демо анимации
Заголовок для демо анимации
Заголовок для демо анимации
Анимация при наведении
Настройки тут
image alt
Заголовок
Кнопка
×
г. Москва, метро “Китай город”, ул. Яузская, дом 15/11
+7 987 654-32-10info@constructor.ru
563
день
0
часов
16
минут
52
секунд
image alt
<style>
.beauty-rotate {
  width: 300px;
  height: 300px;
  border: 4px double #bd6c46; /* Рамка */
  overflow: hidden;
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
} 
.beauty-rotate:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
</style>
image alt
<style>
.grey-image {
    filter: grayscale(1); /* Черно-белый фильтр для изображения */
    transition: 1s; /* Время изменения цвета изображения */
}
.grey-image:hover {
    filter: grayscale(0); /* Цветное изображение при наведении */
}
</style>
image alt
<style>
.hover-image-scale {
  display: inline-block; 
  overflow: hidden; /* Скрываем всё за контуром */
}
.hover-image-scale img {
  transition: 1s; /* Время эффекта */
  display: block; 
}
.hover-image-scale img:hover {
  transform: scale(1.2); /* Увеличиваем масштаб */
}
</style>
Текст
Модификации анимации текста
Craftum Конструктор сайтов Craftum