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


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

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

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

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

HTML

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

<!DOCTYPE html>
 
<html lang=ru>
<head>
 
<title>Увеличение картинки</title>
 
<link rel="stylesheet" href="style.css" />
 
</head>
 
<header>
<h1>Плавное увеличение картинки</h1>
</header>
 
<div class="box">
<div id="quote"><img src="ссылка на изображение"/></div>
</div>
 
</html>

 

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

CSS

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

* {
margin: 0;
padding: 0;
}
 
body {
background-color: #54cbe9;
height: 100%;
padding-top: 0%;
}
 
/*Анимация*/
 
@-webkit-keyframes anim {
0% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.3);}
}
 
header {
position: relative;
z-index: 9999;
margin: 0 auto;
width: 100%;
max-width: 1200px;
min-height: 890px;
}
 
h1 {
font-family: 'Ubuntu', sans-serif;
color: #fff;
font-size: 70px;
padding-top: 23%;
text-align: center;
}
 
.box {
overflow: hidden;
position: relative;
margin: 0 auto;
margin-top: -890px;
width: 100%;
height: 890px;
}
 
#quote img {
width: 100%;
-webkit-animation-name: anim;
-webkit-animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
 
}

 

Как видно из 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 Создаем портфолио с помощью плагина Projects от WooThemes
Next Эффект для картинок на сайте на чистом CSS

Suggested Posts

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

Адаптивный шаблон Zeexo

Модуль доставки Новая Почта для OpenCart 2 v 3.2

Обработка форм с помощью PHP | Видео

Подборка php библиотек (Часть №2)

OpenCart 2.2 — пять свежих адаптивных шаблонов от pavothemes