Плавное увеличене изображения на CSS


Плавное увеличене изображения на CSS

Привет. Как то совершенно случайно на одном сайте я заметил довольно красивый и практичный эффект, который можно использовать на своих сайтах, и смотреться это будет довольно современно. А именно это эффект плавного увеличения большого фонового изображения. Данный эффект можно применить и на небольших изображениях, но в этом случае не так красиво всё будет смотреться.

Плавное увеличене изображения на CSS

Всё это добро оказывается можно сделать на чистом CSS3, и довольно таки просто. Что, в общем, мы сейчас и будем делать.

HTML

И так, для начала создаём HTML файл со следующим содержанием:

 

Тут как всегда всё довольно просто. Как Вы можете увидеть мы создали класс box в него поместили класс quote, в котором будет содержаться наше изображение ну и цитата какая нибудь.

CSS

Ну а сейчас самое интересное это стили CSS, которые и будут заставлять нашу картинку двигаться очень плавно:

 

Как видно из CSS правил, мы здесь используем CSS анимацию, которая собственно и двигает нашу картинку. Мы задали правило @-webkit-keyframes anim, где anim это переменная нашей всей анимации, которая далее будет применяться к классу с изображением.

Параметры 0% {-webkit-transform: scale(1);} и 100% {-webkit-transform: scale(1.3);} означают до каких пор изображение будет увеличиваться, в данном случае это от 1 до 1,3. Думаю больше и не нужно.

Класс #quote img отвечает за скорость анимации, по умолчанию задано 30 секунд, это то время за которое анимация пройдёт от значения 1 до значения 1,3, которые мы задавали выше. Соответственно, если время уменьшить, скорость анимации станет выше и наоборот. Так же тут мы задали правило, чтобы анимация была непрерывная и дойдя своего конца возвращалась обратно. То есть картинка тут плавно увеличивается и уменьшается.

Как видите тут мы не используем никаких скриптов, всё прекрасно работает на CSS. Я думаю, что данный эффект пригодится Вам в Ваших работах. Надеюсь Вам понравилось.

Источник: greatdes.ru

Previous Создаем портфолио с помощью WordPress плагина Projects от WooThemes
Next Эффект для картинок на сайте на чистом CSS

Suggested Posts

Как установить тему на блог WordPress

Дизайн логотипов нарисованный от руки

Сервисы и плагины: кросспостинг из WordPress

Галерея для сайта в виде табов CSS3

Схемы внутренней перелинковки сайта

Как увеличить приток трафика?!