Izsmalcinātas animācijas, kurās kursors tiek virzīts virs attēliem, kam bija nepieciešams JavaScript. Vairāk ne! CSS ir šeit, lai atdzīvinātu jūsu sīktēlus un galerijas.
Attēlu pārvietošanas efekti var pievienot jūsu vietnei papildu slīpēšanas līmeni. Tie rada vienmērīgu efektu, padarot attēlu galerijas vai karuseļus patīkamāku navigāciju. Labākā daļa ir tāda, ka varat izveidot šos efektus, izmantojot tikai CSS un bez JavaScript.
Savos attēlos varat izveidot dažādus animācijas stilus. Tie ietver fona aizmiglošanu vai tālummaiņu, teksta izbalēšanu vai slīdēšanu un fona krāsas maiņu.
HTML izveide attēliem
Sāciet, izveidojot index.html failu tukšā datora mapē, pēc tam atveriet failu ar teksta redaktoru. Failā izveidojiet HTML skeletu un pievienojiet šādu marķējumu sākuma un beigu pamatteksta tagiem:
<divklasē="režģis">
<divklasē="attēlu iesaiņotājs">
<imgklasē="izmiglot"src=" https://picsum.photos/500?random=1"alt=""><divklasē="satura izbalēšana">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reklāma
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divklasē="attēlu iesaiņotājs">
<imgklasē="tālummaiņas aizmiglojums"src=" https://picsum.photos/500?random=2"alt=""><divklasē="satura izbalēšana">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reklāma
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divklasē="attēlu iesaiņotājs">
<imgklasē="izmiglot"src=" https://picsum.photos/500?random=3"alt=""><divklasē="satura slaids pa kreisi">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reklāma
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divklasē="attēlu iesaiņotājs">
<imgklasē="pelēks"src=" https://picsum.photos/500?random=3"alt="">
<divklasē="satura slaids pa kreisi">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reklāma
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>
Šis ir režģa konteiners ar četriem attēlu iesaiņojumiem. Div elementi ar attēlu iesaiņotājs klase kalpo kā attēla un tam atbilstošā teksta iesaiņojums. Katras sadaļas attēlam un saturam ir pievienots unikāls klašu komplekts.
Stila lapā jūs to darīsit mērķējiet uz šiem elementiem pēc to klašu nosaukumiem un izmantojiet dažādus stila un animācijas efektus. Teksts pēc noklusējuma netiks rādīts; jūs to parādīsit tikai tad, kad virzīsit kursoru virs attēla iesaiņojuma, un attēlam tiks pakļauti dažādi efekti.
Pamata CSS pievienošana
Tagad, kad esat izveidojis HTML, ir pienācis laiks veidot to ar CSS. Izveidot a stils.css failu un saiti uz šo stila lapu no sava HTML faila sadaļa:
<saiterel="stila lapa"href="stils.css">Tavā iekšienē stils.css failu, pirmā lieta, kas jums jādara, ir atiestatīt korpusa malu uz nulli un iestatīt apakšējo piemali:
ķermeni {
starpība: 0;
piemale-apakšā: 20rem;
}Tālāk jums ir jāpārvērš visattālākais konteiners par a CSS režģis, ko varat izmantot, lai izkārtotu elementus divās dimensijās. Šis kods izveido režģi ar tik daudzām kolonnām vai rindām, kas atbilst. Katras kolonnas minimālais izmērs ir 300 pikseļi, un maksimālais izmērs ir 1 konteinera daļa:
.režģis {
displejs: režģis;
režģis-veidne-kolonnas: atkārtojiet(automātiska pielāgošana, minmax(300px, 1fr));
}Tā kā vēlaties novietot tekstu attiecībā pret tā konteineru, jums ir jāiestata pozīcija attiecībā pret attēla aptinumu:
.image-wrapper {
pozīciju: radinieks;
pārplūde: paslēptas;
}
Nākamais solis ir attēla stila veidošana. Parādiet attēlu kā bloka elementu, ļaujiet tam aptvert visa konteinera platumu un novietojiet to konteinera centrā:
.image-wrapper > img {
displejs: bloķēt;
platums: 100%;
malu attiecība: 1 / 1;
objektam piemērots: piesegt;
objekts-pozīcija: centrs;
}
Kas attiecas uz tekstu, novietojiet to centrā un piešķiriet caurspīdīgu, gaiši pelēku fona krāsu:
.image-wrapper > .saturs {
pozīciju: absolūts;
ielaidums: 0;
fonta izmērs: 2rem;
polsterējums: 1rem;
fons: rgba(255, 255, 255, .4);
displejs: flex;
izlīdzināt vienumus: centrs;
attaisnot-saturs: centrs;
}
Saglabājiet CSS failu un atveriet index.html savā pārlūkprogrammā. Jums vajadzētu atrast lapu, kas ir līdzīga tai, kas parādīta zemāk esošajā attēlā.
Pārejas iestatīšana attēliem un tekstiem
Tagad, kad attēliem esat pielietojis pamata stilus, nākamais solis ir tiem pievienot animāciju. Sāciet, pievienojot pāreju abiem attēliem un tiem atbilstošajam tekstam:
.image-wrapper > img,
.image-wrapper > .saturs {
pāreja: 200jaunkundzevieglums iekšā-out;
}
Tas nozīmē, ka visi pārejas efekti (t.i., izbalēšana, tālummaiņa un aizmiglojums) ilgs 200 milisekundes un tiem būs tāda pati laika līkne.
Izbalēšanas un aizmiglošanas animācija
Pirmais animācijas stils tekstā izgaist. Novietojot kursoru virs noteikta attēla iesaiņojuma, saturs, kurā ir izbalināt klasei tiks piemērots šis efekts (izbalināšanas un izzušanas animācija). To var panākt, iestatot necaurredzamību uz nulli un mainot to uz vienu, kad pele virzās uz noteikta attēla aptinuma:
.image-wrapper > .saturs.izbalināt {
necaurredzamība: 0;
}
.image-wrapper:virziet kursoru > .saturs.izbalināt {
necaurredzamība: 1;
}
Ja saglabāsit failu un pārbaudīsit savu pārlūkprogrammu, redzēsit izgaismojošo animāciju. Bet jūs varat arī pamanīt, ka teksts ir nedaudz grūti salasāms (ja attēls ir ass un ar lielu kontrastu). Atcerieties, ka visiem attēliem ir arī klases nosaukums aizmiglot. Tas ir paredzēts attēlu aizmiglošanai, lai tiem pievienotu ļoti nepieciešamo kontrastu starp tiem un tekstu:
attēlu iesaiņotājs:virziet kursoru > img.izpludināt {
filtru: aizmiglot(5px)
}
Tagad, virzot kursoru virs attēla, varat redzēt, ka tas vienkārši izplūdīs. Varat palielināt pikseļu vērtību, lai padarītu attēlu izplūšanu izteiktāku, tādējādi pievienojot lielāku kontrastu starp to un tekstu.
Citu efektu pievienošana
Citi efekti ir teksta bīdīšana no kreisās puses, attēla tālummaiņa un pelēktoņu pievienošana attēlam. Šeit ir kods visu trīs efektu sasniegšanai:
.image-wrapper > .saturs.slaidu pa kreisi {
pārveidot: tulkotX(100%)
}.image-wrapper:virziet kursoru > .saturs.slaidu pa kreisi {
pārveidot: tulkotX(0%)
}.image-wrapper:virziet kursoru > img.pelēks {
filtru: pelēktoņu(1)
}.image-wrapper:virziet kursoru > img.izpludināt {
filtru: aizmiglot(5px)
}
.image-wrapper:virziet kursoru > img.tuvināt {
pārveidot: mērogā(1.1)
}
Saglabājiet failu, pēc tam dodieties uz pārlūkprogrammu un virziet kursoru virs katra attēla. Jums vajadzētu redzēt dažādus efektus darbībā.
Lai pabeigtu iebīdāmos efektus, varat izveidot vēl trīs attēlu aptinumus, no kuriem katrs satur attēlu un tekstu. Katrai teksta daļai būtu klases nosaukums slaids uz augšu, slīd uz leju, vai nedaudz pa labi. Tad jūs nododat pareizo vērtību pikseļu, em vai rem, iekšpusē pārveidot () funkcija, lai izveidotu visus trīs efektus.
CSS režģis un Flexbox
CSS Grid un Flexbox ir divas funkcijas, kas ļauj izveidot fantastiskus vietnes izkārtojumus. Jūs varat viegli izveidot praktiski jebkuru vēlamo izkārtojumu un pielāgot rindas un kolonnas pēc savas gaumes. Arī kolonnas pēc noklusējuma būs atsaucīgas. Uzzinot, kad lietot vienu, nevis otru, jūs kļūsit par vienu procentu labāko CSS izstrādātāju.
