Efectul „fundal viu“ pentru un site folosind css

Cu siguranță ați văzut un astfel de efect de divertisment ca imagini vii, atunci când focalizarea este dat doar o singură unitate mobilă, un astfel de efect nu poate trece lateral. Avem, astăzi, a vrut să spună și să împărtășească mod de a pune în aplicare această funcție pentru site-ul dvs., vă rugăm să rețineți că vom folosi doar regulile de stil, nu vom folosi diverse scripturi funcție, aceasta va face acest efect mai flexibil și ușor de afișare. De asemenea, ne-am pregătit în avans a imaginii.
Acest fond va fi un mare plus pentru pagina personala, care va afișa informațiile țintă sau pentru stub sat. Și astfel, să începem.
Pasul 1. HTML
În primul rând avem nevoie pentru a crea un aspect destul de simplu, în care vom avea un singur container, care va fi introdus în trei straturi, în acest caz, vom avea trei straturi de imagini pe care le conectează în stiluri:
Nu uita că trebuie să se conecteze în mod corespunzător fișiere cu stiluri de pe dreapta indică calea către materialul sursă pe server.
Pasul 2. CSS
Cel mai important element al acestei va fi o pastișă, avem nevoie pentru a începe cu, setați parametrii generali ai containerului, și apoi ne conectam imaginea cu regulile de poziționare atribuite:
După cum puteți vedea, am conectat cele patru imagini, dintre care trei vor fi bulbi, pe care le definesc efectul de transformare pe axe, iar al patrulea - fundal, ceea ce va crea efectul de perspectiva imaginii.