Home-theater-designers
Kujutise hõljumise efektid võivad teie veebisaidile lihvida. Need loovad sujuva efekti, muutes pildigaleriides või karussellides liikumise meeldivamaks. Parim osa on see, et saate neid efekte luua ainult CSS-i ja ilma JavaScriptita.
Windows 10 ei saa tegumiribal klõpsata
Saate oma piltidele luua erinevaid animatsiooni stiile. Nende hulka kuuluvad tausta hägustamine või suumimine, teksti tuhmumine või libisemine ning taustavärvi muutmine.
PÄEVA VIDEO MAKKEUSE SISUGA JÄTKAMISEKS KERIMISE
HTML-i loomine jaoks
Alustage selle loomisega index.html faili oma arvuti tühjas kaustas, seejärel avage fail tekstiredaktoriga. Looge faili sees HTML-i skelett ja lisage järgmine märgistus avatavasse ja sulgevasse kehamärgendisse:
<div class="grid">
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=1" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="zoom blur" src="https://picsum.photos/500?random=2" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="grey" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
</div>
See on nelja pildiümbrisega ruudustikukonteiner. Div-elemendid koos pildiümbris klass toimivad pildi ja sellele vastava teksti ümbrisena. Iga jaotise pildile ja sisule on lisatud ainulaadne klasside komplekt.
Stiililehe sees saate sihtida neid elemente nende klassinimede järgi ja rakendada erinevaid stiili- ja animatsiooniefekte. Vaikimisi teksti ei kuvata; kuvatakse see ainult siis, kui hõljutate kursorit pildiümbrise kohal ja pildile avaldatakse protsessi käigus erinevaid efekte.
Põhilise CSS-i lisamine
Nüüd, kui olete HTML-i loonud, on aeg kujundada see CSS-iga. Loo stiil.css fail ja link sellele stiililehele oma HTML-failist
<link rel="stylesheet" href="style.css">
Sinu sees stiil.css faili, peate esimese asjana lähtestama keha veerise nulli ja määrama alumise veerise:
body {
margin: 0;
margin-bottom: 20rem;
}
Järgmiseks peate pöörama kõige välimise konteineri a CSS-võrk, mida saate kasutada elementide kahemõõtmeliseks paigutamiseks . Järgmine kood loob ruudustiku, milles on nii palju veerge või ridu, mis sobivad. Iga veeru minimaalne suurus on 300 pikslit ja maksimaalne suurus on 1 konteineri osa:
parim koht epub -raamatute allalaadimiseks
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Kuna soovite paigutada teksti selle konteineri suhtes, peate määrama asukoha pildiümbrise suhtes:
.image-wrapper {
position: relative;
overflow: hidden;
}
Järgmine samm on pildi stiil. Kuvage pilt plokielemendina, muutke see kogu konteineri laiusele ja asetage see konteineri keskele:
.image-wrapper > img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
}
Mis puutub teksti, asetage see keskele ja andke läbipaistev helehall taustavärv:
.image-wrapper > .content {
position: absolute;
inset: 0;
font-size: 2rem;
padding: 1rem;
background: rgba(255, 255, 255, .4);
display: flex;
align-items: center;
justify-content: center;
}
Salvestage CSS-fail ja avage index.html oma brauseris. Peaksite leidma lehe, mis sarnaneb alloleval pildil olevaga.
Ülemineku ja tekstide sisselülitamine
Nüüd, kui olete piltidele põhilised stiilid rakendanud, on järgmine samm lisada neile animatsioon. Alustage ülemineku lisamisega mõlemale pildile ja neile vastavale tekstile:
.image-wrapper > img,
.image-wrapper > .content {
transition: 200ms ease-in-out;
}
See tähendab, et kõik üleminekuefektid (st tuhmumine, suumimine ja hägustumine) kestavad 200 millisekundit ja neil on sama ajastuskõver.
Pimenduse ja hägustamise animatsioon
Esimene animatsioonistiil on tekstis hääbumas. Kui hõljutate kursorit konkreetse pildiümbrise kohal, kuvatakse sisu, millel on tuhmuma klassis rakendatakse seda efekti (sisse- ja väljalangemisanimatsioon). Selle saavutamiseks määrate läbipaistmatuse nulliks ja muudate selle üheks, kui hiir hõljub teatud pildiümbrisel:
kas saate ps3 -ga ps4 mänge mängida
.image-wrapper > .content.fade {
opacity: 0;
}
.image-wrapper:hover > .content.fade {
opacity: 1;
}
Kui salvestate faili ja kontrollite oma brauserit, näete efektiiv animatsiooni. Kuid võite ka märgata, et teksti on veidi raske lugeda (kui pilt on terav ja palju kontrastset). Tuletage meelde, et kõigil piltidel on ka klassi nimi hägusus . See on mõeldud piltide häguseks muutmiseks, et lisada nende ja teksti vahel vajalikku kontrasti:
image-wrapper:hover > img.blur {
filter: blur(5px)
}
Nüüd, kui hõljutate kursorit pildi kohal, näete, et see lihtsalt häguneb. Saate suurendada pikslite väärtust, et muuta piltidel hägusus selgemaks, lisades seeläbi rohkem kontrasti selle ja teksti vahel.
Muude efektide lisamine
Muud efektid on teksti libistamine vasakult, pildi suumimine ja halltoonide lisamine pildile. Siin on kood kõigi kolme efekti saavutamiseks:
.image-wrapper > .content.slide-left {
transform: translateX(100%)
}
.image-wrapper:hover > .content.slide-left {
transform: translateX(0%)
}
.image-wrapper:hover > img.grey {
filter: greyscale(1)
}
.image-wrapper:hover > img.blur {
filter: blur(5px)
}
.image-wrapper:hover > img.zoom {
transform: scale(1.1)
}
Salvestage fail, seejärel minge oma brauserisse ja hõljutage kursorit iga pildi kohal. Te peaksite nägema erinevaid efekte.
Sisselibistatavate efektide lõpuleviimiseks saate luua veel kolm pildiümbrist, millest igaüks sisaldab pilti ja teksti. Igal tekstil oleks klassi nimi liug üles , alla libisemine, või kergelt-paremale . Siis sisestaksite õige väärtuse piksel, em või rem , sees teisenda() funktsioon kõigi kolme efekti loomiseks.
CSS-võrk ja Flexbox
CSS Grid ja Flexbox on kaks funktsiooni, mis võimaldavad teil luua oma veebisaidile fantastilisi paigutusi. Saate hõlpsasti luua peaaegu iga soovitud paigutuse ning kohandada ridu ja veerge oma maitse järgi. Veerud reageerivad ka vaikimisi. Õppides, millal üht teist kasutada, aitab teil saada ühe protsendi parimaks CSS-i arendajaks.