2017
03
Март

Анимация картинки css



В основном для смены картинок используют JQuery, но в настоящее время можно вполне обойтись без JQuery, исапользовав всего навсего CSS3.

Возможностей у CSS3 много и одно из них мы будем использовать для смены картинок на сайте.



Простой пример


<style> span.example1 { background:url(images/smena1.jpg) no-repeat 50% 50%; width: 220px; height: 220px; display: block; } span.example1:hover{ background:url(images/smena2.jpg) no-repeat 50% 50%; } </style> <div> <span class="example1"></span> </div>

Плавная смена


Рассмотрим более интересный вид смены изображений. Для того, чтобы наши изображения плавно менялись используем абсолютное позиционирование элементов position:absolute и для эффекта плавности transition.

Скорость смены изображений можно менять с помощью свойства transition, изменив время "1s".


<style> div.example2 { width: 220px; height: 220px; margin: 0 auto; } div.example2 img { position:absolute; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .example2 img.smena1 { opacity:0; filter:alpha(opacity=0); } .example2:hover img.smena1 { opacity:1; filter:alpha(opacity=100); } .example2:hover img.smena2, .example2 img.smena2:hover { opacity:0; filter:alpha(opacity=0); } </style> <div class="example2"> <img src="images/smena1.jpg" class="smena1" /img> <img src="images/smena2.jpg" class="smena2" /img> </div>

Трансформация изображений


Для трансформирования изображения добавим свойство transform.

<style> .example2 img.smena2 { -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0); } .example2:hover img.smena2 { -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); } .example2:hover img.smena1 { -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0); } </style>

Смена изображений с вращением


Для вращения изображения добавим свойство rotate ко второму примеру.

<style> .example2 img.smena1 { -moz-transform:scale(1,0); -webkit-transform:scale(1,0); -o-transform:scale(1,0); -ms-transform:scale(1,0); } .example2:hover img.smena1 { -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); } .example2:hover img.smena2 { -moz-transform:rotate(180deg) scale(0); -webkit-transform:rotate(180deg) scale(0); -o-transform:rotate(180deg) scale(0); -ms-transform:rotate(180deg) scale(0); } </style>

Слайдер изображений


Для создания простейшего слайдера используем свойство margin. Убираем полосу прокрутки overflow:hidden; и используем margin-left.

<style> div.example5 { width: 220px; height: 220px; margin: 0 auto; overflow:hidden; } div.example5 img { position: absolute; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .example5 img.smena1 { opacity:0; filter:alpha(opacity=0); } .example5:hover img.smena1 { opacity:1; filter:alpha(opacity=100); } .example5:hover img.smena2, .example5 img.smena2:hover { opacity:0; filter:alpha(opacity=0); } .example5 img.smena1, .example5:hover img.smena1 { margin-left: 0px; } .example5:hover img.smena2 { margin-left: 220px; } .example5 img.smena1 { margin-left: -220px; } </style>
Шары Смайл радостный

Успехов Вам!