CSS transformāciju un pāreju rekvizītu rokasgrāmata
Vai esat kādreiz domājis, kā animācija kādā no vietnēm tiek darbināta? CSS Transforms un Transitions iestatījumi var radīt visdažādākos trikus! Rekvizīts CSS Transform HTML elementiem 2D vai 3D formātā piemēro kustību, pagriešanu, sašķiebšanu un mērogošanu. Pārejas transitions īpašība palīdz izmaiņām notikt vienmērīgi un ātri.
Ja jūs mēģināt padarīt savu projektu interaktīvu, jums jāzina par šo spēku pāri, lai jūsu animācijas būtu konsekventas un nenotveramas. Vislabāk ir izvairīties no vairāku pārlūkprogrammu saderības problēmām, kas varētu sarežģīt jūsu dizainu.
Tātad, kāda ir atšķirība starp CSS transformāciju un CSS pāreju?
Rekvizīts Transform CSS pārvieto vai maina elementa izskatu, savukārt pārejas rekvizīts nemanāmi un maigi pārceļ elementu no viena stāvokļa uz citu.
Šajā emuārā mēs detalizēti iedziļināsimies CSS transformācijas un pārejas rekvizītos, kas palīdzēs jums izveidot vienkāršas un lieliskas animācijas ar mazāku koda rindu skaitu.
CSS transform iestatījums:
Pārveidošanas “transform” rekvizīts CSS tiek izsaukts, ja tiek mainīts HTML elementa stāvoklis. Varat pagriezt, sašķiebt, pārvietot un mērogot elementus. Tas notiek, kad tiek mainīts elementa stāvoklis, piemēram, kad novietojat peles kursoru virs pogas vai veiciet peles klikšķi. Kā tas darbojas, mēs redzēsim turpmākajās šī emuāra sadaļās.
Ir trīs CSS pārveidošanas rekvizītu varianti 2D formātā.
- transform: īpašībaX(x);
- transform: īpašībaY(y);
- transform: īpašība(x,y);
Šeit īpašība attiecas uz elementa rekvizītu, kuru vēlaties mainīt, x un y var būt negatīvas vai pozitīvas vērtības. CSS transformācijas rekvizīts 3D formātā ietver Z asi. X ir platums, Y ir augstums, un Z norāda ekrāna dziļumu.
Translate
Tulkošanas “TRANSLATE” rekvizīts maina elementa pozīciju:
- pa kreisi
- pa labi
- uz augšu
- uz leju
pamatojoties uz norādītajiem X (horizontālās) un Y (vertikālās) asu parametriem. Pozitīvais X ass parametrs pārvieto elementu pa labi, bet negatīvais — pa kreisi. Pozitīvais Y ass parametrs pārvieto elementu uz leju, bet pozitīvais – virzienā uz augšu.
HTML piemēra kods:
<div class="container">
<h3>Hover!</h3>
<div id="box"></div>
</div>CSS piemēra kods:
#box
{
width: 120px;
height: 120px;
background-color: rgba(55, 255, 5, 0.582);
border-radius: 12px;
border: solid rgb(110, 235, 110) 4px;
}
#box :hover{ transform: translate(100%,60%);}Iznākums:
Iepriekš minētajā piemērā lodziņš pārvietosies no sākotnējās pozīcijas uz 100% pa labi un 60% uz leju, jo abi ir pozitīvi parametri.
Sašķiebšana “Skew”:
Skew sasver elementu virzienā, pamatojoties uz sniegtajiem parametriem uz tā X un Y asīm. Parametrs Pozitīvais X noliec to pa labi, bet negatīvais – pa kreisi. Tajā pašā laikā pozitīvais Y noliek to uz leju, bet negatīvais – uz augšu.
HTML piemēra kods:
<div class="container">
<h3>Hover!</h3>
<div id="box"></div>
</div>CSS piemēra kods:
#box
{
width: 120px;
height: 120px;
background-color: rgba(246, 200, 250, 0.932);
border-radius: 12px;
border: solid rgb(246, 169, 253) 4px;
}
#box :hover{ transform: skew(30deg,30deg);Iznākums:
Iepriekš minētajā piemērā lodziņš ir noliekts pa labi un uz augšu, jo abi ir pozitīvi parametri.
Ja jūs sašķiebsit elementu, tas sašķiebs arī visus elementā esošos “bērnus”. Ja mums ir jāsaglabā bērna elementa sākotnējais leņķis, mums būs jāizmanto pretēja šķībuma vērtība, lai saglabātu to oriģinālu.
Mērogs Scale:
Mērogs var palielināt vai samazināt HTML elementa izmēru, pamatojoties uz norādītajiem parametriem. Pozitīvā vērtība palielina izmēru X vai Y virzienā, bet negatīvā vērtība samazina izmēru X vai Y virzienā.
Vienkārši sakot, new_size = parametrs * original_size;
HTML piemēra kods:
<div class="container">
<h3>Hover!</h3>
<div id="box"></div>
</div>CSS piemēra kods:
#box
{
width: 120px;
height: 120px;
background-color: rgba(172, 221, 243, 0.842);
border-radius: 12px;
border: solid rgb(172, 221, 243) 4px;
}
#box :hover{ transform: scale(0.5);}
Iepriekš minētajā piemērā kastes izmērs ir samazināts uz pusi no tā sākotnējā izmēra.
Rotācija / Rotate
Rekvizīts Rotate var pagriezt elementu pulksteņrādītāja virzienā vai pretēji pulksteņrādītāja virzienam, pamatojoties uz noteiktu grādu skaitu. Pozitīvā pakāpe griež elementu pretēji pulksteņrādītāja virzienam, bet negatīvais parametrs griež elementu pulksteņrādītāja virzienā.
HTML piemēra kods:
<div class="container">
<h3>Hover!</h3>
<div id="box4"></div>
</div>CSS piemēra kods:
#box4{
width: 120px;
height: 120px;
background-color: rgba(247, 169, 169, 0.788);
border-radius: 12px;
border: solid rgb(247, 169, 169) 4px;
}
#box4:hover{ transform: rotate(25deg);}
Iepriekš minētajā piemērā kaste tiek pagriezta par 25 grādiem pretēji pulksteņrādītāja virzienam, jo parametrs ir pozitīvs.
Papildus šiem elementiem mēs varam apvienot vairākus CSS transformācijas rekvizītus. Jums būs jānorāda rekvizīti, kurus vēlaties mainīt.
Piemēram: transformēt: prop1(parameters) prop2(parameters);
Apskatīsim piemēru. Šeit esmu pievienojis pārejas rekvizītu.
HTML piemēra kods:
<div class="container">
<h3>Hover!</h3>
<div id="box"></div>
</div>CSS piemēra kods:
#box{
width: 120px;
height: 120px;
background-color: rgba(247, 169, 169, 0.788);
border-radius: 12px;
border: solid rgb(247, 169, 169) 4px;
transition: all 0.7s ease;
}
#box:hover
{
transform: rotate(120deg) scale(1.5) translateY(-100px);
}
Pārveidojumi bez pāreju pievienošanas notiek ātri, sekundes daļā. Mēs to izlabosim nākamajā sadaļā, pievienojot tai dažas pārejas.
CSS Transition iestatījums
Mēs redzējām, kā dažādi CSS Transform rekvizīti vizuālā veidā maina elementa stāvokli. Tagad pārejas rekvizīts šim mainītajam stāvoklim pievieno pakāpenisku. Pārveidošana noteiktā laika posmā kļūs gluda un organiska.
Lai pāreja stātos spēkā, ir nepieciešami trīs galvenie rekvizīti:
- pārejas iestatījums
- pārejas ilgums
- pārejas laiks
Jums ir jānorāda maināmā elementa rekvizīts un ilgums, kurā šīm izmaiņām jānotiek. Laika funkcija un aizkaves īpašības nav obligātas.
div {
transition: [property] [duration] [timing-function] [delay];
}Transition iestatījums
Pārejas rekvizīts definē CSS rekvizītu, kurā tiks piemērota pāreja uz elementu. Mēs varam arī piemērot pāreju vienam īpašumam (piemēram, fona krāsai vai transformācijai) vai visiem kārtulu kopas rekvizītiem.
div {
transition-property: all;
transition-property: transform;
}pārejas ilgums
Pārejas ilguma rekvizīts nosaka pārejas laika posmu pār elementu. Mēs varam norādīt sekundēs vai milisekundēs.
div { transition-duration: 4s; }Tālāk ir sniegts CSS pārejas rekvizīta koda piemērs.
HTML piemēra kods:
<div class="wrap">
<div class="container">
<h1>300ms</p>
<div class="box1 box"></div>
</div>
<div class="container">
<h1>1s</p>
<div class="box2 box"></div>
</div>
<div class="container">
<h1>3s</p>
<div class="box3 box"></div>
</div>
</div>CSS koda piemērs:
.wrap {
margin: 50px;
}
.container {
display: inline-block;
width: 150px;
}
h1 {
color: lightgray;
font-family: lato;
font-size: 20px;
font-weight: 200;
padding: 20px;
text-align: center;
}
.box {
border-radius: 50%;
height: 40px;
margin: 50px auto;
width: 40px;
.wrap:hover & {
transform: scale(2);
}
}
.box1 {
background: #60D4C8;
transition: all 300ms;
}Iznākums:
Tālāk apskatīsim mēroga pārveidošanas piemēru ar pievienotu pārejas rekvizītu.
HTML
.squareCSS
.square {
background: darkturquoise;
border-radius: 5px;
height: 100px;
margin: 100px;
transition: transform 1s;
width: 100px;
&:hover {
transform: scale(2);
}
}Iznākums:
Transition pārejas laiks
Pārejas laika funkcijas rekvizīts norāda pārejas ātrumu visā elementa darbības laikā. Noklusējuma laiks ir vienkāršs, kas sākas lēni, uzreiz paātrina un pēc tam pakāpeniski samazinās beigās.
Citas laika noteikšanas iespējas ietver ease, ease-in, ease-out, ease-in-out, and linear.
Tālāk ir sniegts dažādu laika opciju piemērs izmanto ar transformāciju: translate property.
<div class="container">
<div class="circle0"></div>
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>.container {
margin: 100px;
}
.circle {
border-radius: 50%;
height: 30px;
width: 30px;
margin: 10px;
.container:hover & {
transform: translateX(200px);
}
}
.circle0 {
@extend .circle;
background: PaleTurquoise;
transition: all 1.5s linear;
}
.circle1 {
@extend .circle;
background: salmon;
transition: all 1.5s ease;
}
.circle2 {
@extend .circle;
background: lightskyblue;
transition: all 1.5s ease-in;
}
.circle3 {
@extend .circle;
background: khaki;
transition: all 1.5s ease-out;
}
.circle4 {
@extend .circle;
background: mediumturquoise;
transition: all 1.5s ease-in-out;
}
.circle5 {
@extend .circle;
background: thistle;
transition: all 1.5s cubic-bezier(0,1,.98,0);
}
Kā redzam, kaste pakāpeniski samazinās mazāk par sekundi.
Varat norādīt vienu pārejas veidu visiem rekvizītiem, kā parādīts piemērā, vai arī katram no tiem varat norādīt dažādas pārejas, kā norādīts tālāk.
pāreja: p1 d1, p2 d2, …, pn dn;
Kur pn norāda rekvizīta nosaukumu un dn norāda ilgumu.
Pārlūkprogrammu saderība
Tagad apskatīsim, kā mēs varam mēģināt panākt, lai pāreja darbotos visās pārlūkprogrammās. Tam mēs izmantosim pārdevēja prefiksus.
Apsveriet iepriekš minēto piemēru, šādi tas izskatās pārdevēja prefiksiem:
Šeit – tīmekļa komplekts pārlūkam Chrome, Safari; -moz Firefox, -o Opera.
#box
{
width: 120px;
height: 120px;
background-color: rgb(140, 212, 245);
-webkit-transition: all 1s;
-moz-transition: all 1s ;
-o-transition: all 1s ;
transition: all 1s;
}
#box :hover{ transform: scale(0.5);}Pārdevēja prefiksu norādīšana nodrošina, ka pārejas darbojas uzreiz visās pārlūkprogrammās, kuras parasti izmanto mērķauditorija.
Atbildēt