- PVSM.RU - https://www.pvsm.ru -
Доброго времени суток, уважаемые читатели! Сегодня я хочу рассказать Вам о том, как за несколько минут при помощи CSS3 создать такую вот красоту:
В чём вся красота вы поймёте попозже.
Приступим к работе и начнём с написание основного HTML кода. В один блочный елемент (с id=«ph») мы поместим четыре блока с одинаковым классом но разными идентификаторами, и в каждом из этих блоков будет своя фотограффия. Код будет віглядеть так:
<div id="ph">
<div class="photo" id="photo1">
<img src="photo2.jpg" />
</div>
<div class="photo" id="photo2">
<img src="photo3.jpg" />
</div>
<div class="photo" id="photo3">
<img src="photo6.jpg" />
</div>
<div class="photo" id="photo4">
<img src="photo7.jpg" />
</div>
</div>
Для нашей странички и блока #ph мы пропишем такие стили:
body {
background-repeat: none;
background: #111013 url(image1.jpg) no-repeat top center;
margin: 0;
min-width: 1000px;
}
#ph {
text-align: center;
padding: 75px;
margin-top: 50px;
}
Все выше указанные стили написаны лишь для красоты.
Логика работы даного велосипеда заключается вот в чём:
Каждый блок с картинкой мы делаем инлайн-блоком и задаём относительное позиционирование, чтобы потом можно было его двигать:
.photo {
display:inline-block;
position:relative;
}
Для картинки внутри мы просто задаём ширину в 130 пикселей:
.photo img {
width: 130px;
}
Каждый блок с картинкой мы поворачиваем на рандомный угол:
#photo1 {
transform: rotate(-20deg);
}
#photo2 {
transform: rotate(10deg);
}
#photo3 {
transform: rotate(35deg);
}
#photo4 {
transform: rotate(-15deg);
}
При наведении на блок картинка должна увеличиваться и помещаться поверх все остальных. Отступы добавлены для того, чтобы при этом остальные блоки не «ездили».
.photo:hover img{
width: 250px;
margin: -80px -60px;
z-index: 1000;
}
Свойства transition и transform относятся к свойствам CSS третьего уровня. Большинство браузер не поддерживают этих нативных свойств, а имеюь свои аналоги с приставками типа -webkit- или -moz-. Для разных браузеров свои префиксы:
Чтобы наш велосипед работал в разных браузерах нужно добавить эти префиксы в наш код. Рассмотрим пример для .photo и #photo1:
.photo {
-webkit-transition: all 0.5s;
-webkit-transition-delay: 0.1s;
-moz-transition: all 0.5s;
-moz-transition-delay: 0.1s;
-ms-transition: all 0.5s;
-ms-transition-delay: 0.1s;
-o-transition: all 0.5s;
-o-transition-delay: 0.1s;
transition: all 0.5s;
transition-delay: 0.1s;
}
#photo1 {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
Результат радует глаза (по крайней мере мои). Посмотреть его вы можете здесь [1].
Не судите строго, это лишь урок для начинающих разработчиков.
Автор: makzimko
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css3/4862
Ссылки в тексте:
[1] здесь: http://criptex.org.ua/projects/animated_photo
Нажмите здесь для печати.