Ефектът от "на живо фон" на сайт посредством CSS

Ефектът от

Със сигурност сте виждали такъв забавен ефект като живи образи, когато фокусът се дава само едно мобилно устройство, такъв ефект не може да премине страна. Ние имаме днес, исках да кажа и да споделя начин за изпълнение на тази функция за вашия сайт, моля, имайте предвид, че ние ще използваме само правилата за стил, ние няма да се използват различни сценарии функция, тя ще направи този ефект по-гъвкави и лесно да се покаже. Също така, ние сме подготвили предварително на изображението.

Този фон ще бъде чудесно допълнение към личната страница, която ще се появи на целевата информация, или за село все още мъниче. И така, нека да започнем.

Стъпка 1. HTML

Първо трябва да се създаде доста просто оформление, в които ние ще имаме един контейнер, който ще се влезе в три слоя, в този случай, ние ще имаме три нива на изображения, които ние се свързват в стилове:

Не забравяйте, че ние трябва да свържете правилно файлове с стилове отдясно показват пътя към вашия изходен материал на сървъра.

Стъпка 2. CSS

Най-важният елемент на това ще бъде имитация, ние трябва да започнем с това, установяването на общите параметри на контейнера, а след това се свържете на изображението с възложените правилата за позициониране:

Както можете да видите, ние сме свързани четирите изображения, три от които ще бъде крушки, които определят ефекта на трансформация на осите, а четвъртият - на заден план, което ще създаде ефекта от гледна точка на изображението.

Това е всичко. Готово!