Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web servers, web development, networking and security services. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.

CSS3: Pseudo-ţintă de clasă şi animaţii CSS

Source: http://webdesignernotebook.com/css/the-css3-target-pseudo-class-and-css-animations/

CSS, Proiect 52 | 11 ianuarie 2010
CSS3: Pseudo-ţintă de clasă şi animaţii CSS Fotografie de viaţa lui.

Nu este un secret că sunt mereu în căutarea pentru un mod usor cu ajutorul CSS în loc de a încerca să reproducă lucruri cu codul de complicate - nu sunt atât de multe tehnici insuficient exploatate ca am putea fi aplicarea la modelele noastre ca un strat de accesoriu! În această experienţă, am să ia o privire scurtă în : ţintă pseudo-clasă şi un foarte simplu CSS animaţie.

: Ţintă pseudo-clasa

Noi folosim adesea de identificare fragment din codul nostru - de obicei pentru a indica un element specific pe o pagină, reprezentat printr-un "#" si o ancora. Când ne-am faceţi clic pe un link care se termină cu un identificator fragment (de exemplu, aceasta), ca element de noi sunt orientate către devine tinta (deci : ţintă).

Acest lucru : ţintă pseudo-clasa poate fi stil, la fel ca noi stil : hover sau : activ pseudo-clase pe link-uri.

Pentru a vedea un exemplu în sălbăticie, du-te la Wikipedia şi faceţi clic pe un link de referinţă (de exemplu, aceasta). Dacă utilizaţi un browser bun, veţi vedea că aceasta are un fundal albastru deschis, şi dacă te uiţi la CSS, veţi vedea acest lucru:

ol.references > li:target, sup.reference:target, span.citation:target, cite:target  {
background-color:#DDEEFF;
}

Destul de uşor, nu?

Exemplul nostru

Daca esti nerabdator, aveţi posibilitatea să luaţi o privire la ultim exemplu acum (utilizarea Safari):

Vezi exemplu

Am de gând să creaţi o listă simplă de link-uri (folosind identificatori fragment) la blocuri de text de mai jos lor. Iată de markup:

<div id="content">

<ul>
	<li><a href="#b1">Block 1</a></li>
	<li><a href="#b2">Block 2</a></li>
	<li><a href="#b3">Block 3</a></li>
	<li><a href="#b4">Block 4</a></li>
</ul>

<div id="b1">
	<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought.</p>
</div>

<div id="b2">
	<p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.</p>
</div>

<div id="b3">
	<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>

<div id="b4">
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>

</div>
CSS de bază

În primul rând, avem nevoie să acopere elementele de bază. Voi folosi un foarte simplu reset pentru acest exemplu, dar ar trebui să utilizaţi unul adecvat în proiectele dumneavoastră. Voi seta doar font-size, line-înălţime, font-family şi resetare padding şi marja pentru elementele pe care le folosim:

body {
	font:62.5%/1.5 Cambria,Georgia,"Times New Roman",Times,serif;
	}
div, ul, li, a, p {
	padding:0; margin:0;
	}

În al doilea rând, voi repede stilul containerului div " conţinut ":

#content {
	width:500px;
	margin:auto;
	font-size:1.4em;
	}

În al treilea rând, restul elementelor. Voi:

  1. Adaugă o marjă mică de jos a listei şi la fiecare bloc de text.
  2. Scoateţi marcatorilor din lista noastră - nu avem nevoie de ele pentru exemplul.
  3. Adauga unele padding şi o bordură la lumină blocuri de text.
  4. Asiguraţi-prima linie a fiecărui paragraf în litere mici. Doar pentru că eu pot.

Notă Sunt folosind copilul combinator (sau selector) pentru a se asigura div e vizez sunt cele care sunt descendenti directi din principalele " conţinut " div. Deci, dacă, din anumite motive, am fost de a avea div -i în interiorul blocurilor de text, ei nu ar fi afectate. De asemenea, nu trebuie să dea aceste div "clasa sa sau să vizaţi cu acestea de către lor id-ul "s.

ul, div > div {
	margin-bottom:1em;
	}
li {
	list-style:none;
	}
div > div {
	padding:1em;
	border:1px solid #ffffd3;
	}
div > div p:first-line {
	font-variant:small-caps;
	font-size:1.2em;
	}
Suculent biţi

Acum am de gând să stil : ţintă pseudo-clasă. În primul rând, voi adăuga un pic de frontieră mai inchisa decat non-ţintă div s ":

div > div:target {
	border:1px solid #dac89d;
	}

Introduce animaţie CSS. Pentru a crea o animaţie aveţi nevoie de două lucruri: o definiţie a ceea ce produce efecte de animaţie şi un apel pentru animaţie de la elementul pe care doriţi să animaţi.

Sa definim prima animaţie.

Voi defini animaţie prin înfiinţarea de cadre cheie la anumite puncte. În acest caz, vreau să înceapă ca fundal alb, se sting apoi într-o lumină galbenă, apoi înapoi la alb - voi avea nevoie de 3 etape diferite (sau cadre cheie).

Imaginaţi-vă fiecare pas este un selector simplu, dar în loc de a avea, de exemplu, acest lucru:

div {
	background: red;
	}

avem nevoie pentru a specifica un moment în timp (folosind procente, sau doar " pentru "şi" de la "dacă avem nevoie doar de" 0% "şi" 100% "):

10% {
	background: red;
	}

De asemenea, aici voi numele meu de animaţie. Eu va numesc " ţintă ":

@-webkit-keyframes target {
	from { background:#ffffff; }
	50% { background:#ffffd3; }
	to { background:#ffffff; }
	}

Deci, animaţia este definit, acum avem nevoie să-l sunaţi la : ţintă selectorul. Putem seta fiecare proprietate separat, fie, sau de a folosi versiunea stenografie. Să vedem codul complet:

div > div:target {
	border:1px solid #dac89d;
	-webkit-animation-name:target;
	-webkit-animation-duration:.5s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:linear;
	}

-WebKit- biţi ar trebui să fie auto-explicative. Avem nevoie pentru a specifica numele de animaţie (" ţintă "), este durata (" e 0.5 ", o jumătate de secundă), de câte ori ar trebui să fie repetate (" 1 ") si directia este (" liniar ").

Prescurtarea versiune arată ca acest loc:

div > div:target {
	border:1px solid #dac89d;
	-webkit-animation:target.5s linear;
	}

Mult mai simplu! Deoarece noi doar doriţi ca animaţia să repete o dată, nu putem preciza chiar " 1 "în acest caz (dacă ai vrut să, ai putea avea drept după" s 0.5 "). Să presupunem că doriţi să se repete de două ori animaţie, trebuie să-l specificaţi ca aceasta:

div > div:target {
	border:1px solid #dac89d;
	-webkit-animation:target.5s 2 linear;
	}
Sfârşitul anului

Sper că va plăcut acest tutorial scurt. Există posibilităţi infinite pentru animaţie şi CSS pentru mai multe selectoare CSS avansate, dar eu simt că cei pe care i arăt aici pot fi efectiv utilizate pe proiecte reale, cu nici un prejudiciu pentru utilizatorii de navigarea pe web cu browsere mai puţin prietenos.

Nu sunteţi de acord? Aţi folosit : ţintă pseudo-clasă, pe proiectele dumneavoastra? Ce zici de animaţie CSS?

Nota: Aceasta animatie este vizibil numai pe Safari (şi Chrome, cum ar fi Dougal rugăm subliniat !). : Ţintă pseudo-clasă nu este încă susţinută de Internet Explorer. Firefox si Opera va arăta doar frontieră întunecate atunci când faceţi clic pe link-urile, dar că este un compromis bun.

Published (Last edited): 09-11-2011