Плавное изменение background

Анимацию можно легко сделать через CSS свойство transition например для кнопок, меню и т.д. Подробнее на htmlbook.ru.

Например, изображение меняются при наведении на него курсора мыши (:hover).

<a class="button" href="#"></a>
HTML
.button {
	display: inline-block;
	height: 129px;
	width: 129px;
	background: url(/transition.png) 0 0 no-repeat;
	transition: background 0.2s ease;
}

.button:hover {
	background-image: url(/transition-active.png);
}
CSS

Также transition можно применить к размеру изображения (background-size).

.button {
	display: inline-block;
	height: 129px;
	width: 129px;
	background: url(/transition.png) 50% 50% no-repeat;
	background-size: 100% 100%;
	transition: background-size 0.5s ease;
}

.button:hover a {
	background-size: 80px 80px;
}
CSS

Как дополнение, можно добаввить смену background-image:

.button {
	display: inline-block;
	height: 129px;
	width: 129px;
	background: url(/transition.png) 50% 50% no-repeat;
	background-size: 100% 100%;
	transition: background-size 0.5s ease;
	transition: background 0.5s ease;
}

.button:hover a {
	background-size: 80px 80px;
	background-image: url(/transition-active.png);
}
CSS
27.12.2016, обновлено 19.02.2021
42592

Комментарии

, чтобы добавить комментарий.

Другие публикации

Не стандартный СSS градиент
Подборка необычных градиентов CSS3 показывающая все возможности linear-gradient.
6744
+2
Полупрозрачный градиент поверх картинки
Такой эффект можно сделать с помощью :before у родительского элемента. Поверх изображения помещается абсолютный блок с...
40443
+4
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
27573
+30
Генерация QR-кода в PHP
Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой...
37696
+11
Текст с градиентом
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.
26439
+5
Как сделать несколько фонов в background
В CSS3 появилась возможность указать в свойстве background несколько изображений (Multiple Backgrounds), при этом они...
5173
+1