Proprietatea clip-path poate fi aplicată tuturor elementelor HTML, precum și elementelor grafice SVG și elementelor container SVG. Vă permite să "tăiați" un element de aproape orice formă. Aceasta poate fi o tăiere de formă dreptunghiulară, sub forma unui cerc sau oval, precum și o formă de formă arbitrară - un multi-poligon.
O mulțime de articole au fost scrise despre toate aceste posibilități, așa că nu vom mai vorbi despre ele. Astăzi, să examinăm o aplicație ușor diferită a proprietății clip-path
În multe cazuri, vârfuri, când se deplasează peste o imagine, există o anumită transformare - schimbare, deplasare, torsiune rotativă și multe altele. Dar în toate aceste cazuri imaginea este transformată într-o formă generală, adică imaginea, să zicem, se mișcă complet în stânga, și nu o parte din ea, în timp ce deschid noi informații.
În acest articol vom "rupe" imaginea în 2 părți, iar linia de ruptură poate alege o altă formă. Totul începe cu codul HTML. Prin eticheta figura, atribuim 2 imagini identice, fiecare dintre ele va fi tăiat prin parametrii săi și 2 SVG - dreptunghiuri care sunt invizibile datorită lățimii = "0" height = "0". La fiecare imagine SVG am stabilit identificatorul nostru.
În foaia de stil, scrieți parametrii necesari.
Acest lucru ar putea fi completat, dacă nu pentru un singur DAR.
În exemplul 1, atunci când "linia secțiunii" trece practic de-a lungul liniei de orizont și, prin urmare, este "pierdută" în varietatea de culori. Dar merită să "mișcați linia" pentru a vă deplasa puțin mai sus sau mai jos pentru a vedea linia perforată (constă dintr-un set de "găuri" prin care se vede imaginea care se deschide când se deplasează). Acest lucru este bine văzut în exemplele 2 și 3, dacă acestea sunt date în aceeași schemă ca în exemplul 1.
Pentru a scăpa de această problemă, adăugăm încă o imagine între cele deja specificate, care ascund "perforarea"
Când treceți, această imagine va "dispărea" până la începutul transformării și va "apare" după închiderea completă a liniei decalajului.
Mai jos sunt trei exemple diferite - comutați, poziționați cursorul, vedeți rezultatul. Dacă doriți, puteți descărca și înțelege mai detaliat.
Exemplul 1 Exemplul 2 Exemplul 3 Descărcare
Vulcanul nu doarme
0 50%, 100% 50%, 100% 100%, 0 100%
Indonezia. Insula Java.
Articole similare
Trimiteți-le prietenilor: