Home-theater-designers
A képlebegtetési effektusok további fényezést adhatnak webhelyének. Sima hatást keltenek, kellemesebbé téve a képgalériákban vagy körhintákon való navigálást. A legjobb az egészben az, hogy ezeket az effektusokat csak CSS-sel, JavaScript nélkül hozhatja létre.
Különböző stílusú animációkat hozhat létre a képeken. Ide tartozik a háttér elmosása vagy nagyítása, a szöveg halványítása vagy elcsúsztatása, valamint a háttérszín megváltoztatása.
MAKEUSEOF A NAP VIDEÓJA GÖRGÖZSEN A TARTALOM FOLYTATÁSHOZ
A HTML létrehozása a
Kezdje azzal, hogy hozzon létre egy index.html fájlt a számítógép egy üres mappájában, majd nyissa meg a fájlt egy szövegszerkesztővel. A fájlon belül hozza létre a HTML-vázat, és adja hozzá a következő jelölést a nyitó törzs és a záró body címkék belsejébe:
miért fut ilyen lassan a firefox?
<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>
Ez egy rácstároló négy képburkolóval. A div elemek a képburkoló osztály a kép és a hozzá tartozó szöveg burkolójaként szolgál. Az egyes szakaszok képéhez és tartalmához egyedi osztályok vannak hozzáadva.
A stíluslapon belül fogsz célozd meg ezeket az elemeket az osztálynevükkel és alkalmazza a különböző stílus- és animációs hatásokat. A szöveg alapértelmezés szerint nem jelenik meg; csak akkor jelenik meg, ha az egérmutatót a képburkoló fölé viszi, és a kép különböző effektusokon megy keresztül.
Alapszintű CSS hozzáadása
Most, hogy elkészítette a HTML-t, itt az ideje, hogy CSS-sel alakítsa ki. Hozzon létre egy stílus.css fájlt, és hivatkozzon erre a stíluslapra a HTML-fájlból, a
<link rel="stylesheet" href="style.css">
A tiédben stílus.css fájl, az első dolog, amit meg kell tennie, hogy nullára állítja a törzs margóját, és állítson be néhány alsó margót:
body {
margin: 0;
margin-bottom: 20rem;
}
Ezután a legkülső tartályt a CSS-rács, amellyel elemeket két dimenzióban helyezhet el . A következő kód egy rácsot hoz létre annyi oszlopból vagy sorból, amennyi elfér. Az egyes oszlopok minimális mérete 300 képpont, a maximális mérete pedig a tároló 1 töredéke:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Mivel a szöveget a tárolójához viszonyítva szeretné elhelyezni, be kell állítania a pozíciót a képburkoláshoz viszonyítva:
.image-wrapper {
position: relative;
overflow: hidden;
}
A következő lépés a kép stílusának kialakítása. Jelenítse meg a képet blokk elemként, tegye át a teljes tároló szélességére, és helyezze a tartály közepére:
.image-wrapper > img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
}
Ami a szöveget illeti, helyezze el középen, és adjon átlátszó, világosszürke háttérszínt:
.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;
}
Mentse el a CSS-fájlt, és nyissa meg index.html a böngészőjében. Az alábbi képen láthatóhoz hasonló oldalt kell találnia.
hogyan lehet megtudni háza történetét
Az átmenet és a szövegek bekapcsolása
Most, hogy az alapvető stílusokat alkalmazta a képeken, a következő lépés az animáció hozzáadása. Kezdje azzal, hogy mindkét képhez és a megfelelő szöveghez adjon átmenetet:
.image-wrapper > img,
.image-wrapper > .content {
transition: 200ms ease-in-out;
}
Ez azt jelenti, hogy az összes átmeneti effektus (azaz a fade-in, a zoom és az elmosódás) 200 ezredmásodpercig tart, és ugyanaz az időgörbe.
Fade-In és Blur animáció
Az első animációs stílus elhalványul a szövegben. Ha az egérmutatót egy adott képburkoló fölé viszi, a tartalom, amely a áttűnés osztályban ezt a hatást (fade-in és fade-out animáció) alkalmazzák rá. Ezt úgy érheti el, hogy az átlátszatlanságot nullára állítja, és egyre módosítja, amikor az egér egy adott képburkolón mozog:
ingyenes blu ray ripper windows 10
.image-wrapper > .content.fade {
opacity: 0;
}
.image-wrapper:hover > .content.fade {
opacity: 1;
}
Ha elmenti a fájlt, és ellenőrzi a böngészőt, megjelenik az elhalványuló animáció. De azt is észreveheti, hogy a szöveg kissé nehezen olvasható (ha a kép éles és nagy a kontrasztja). Emlékezzünk vissza, hogy minden képnek van osztályneve is elhomályosít . Ez a képek elmosására szolgál, hogy némi kontrasztot adjon a képek és a szöveg között:
image-wrapper:hover > img.blur {
filter: blur(5px)
}
Most, amikor a kép fölé viszi az egérmutatót, láthatja, hogy az egyszerűen elmosódik. Növelheti a pixel értékét, hogy az elmosódást kifejezettebbé tegye a képeken, ezáltal növelve a kontrasztot a kép és a szöveg között.
Egyéb effektusok hozzáadása
A többi effektus a szöveg balról történő csúsztatása, a kép nagyítása és szürkeárnyalatos hozzáadása a képhez. Íme a kód mindhárom hatás eléréséhez:
.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)
}
Mentse el a fájlt, majd lépjen a böngészőjébe, és vigye az egérmutatót az egyes képek fölé. Látnia kell a különböző hatásokat működés közben.
A becsúsztatható effektusok befejezéséhez további három képburkolót hozhat létre, amelyek mindegyike egy-egy képet és szöveget tartalmaz. Minden szövegrészhez tartozik az osztálynév felcsúszik , csúsztassa le, vagy enyhén jobbra . Akkor adja át a megfelelő értéket pixel, em vagy rem , benne transzformáció() funkciót mindhárom hatás létrehozásához.
CSS Grid és Flexbox
A CSS Grid és a Flexbox két olyan funkció, amelyek segítségével fantasztikus elrendezéseket hozhat létre webhelyéhez. Gyakorlatilag bármilyen elrendezést könnyedén létrehozhat, és ízlése szerint testreszabhatja a sorokat és oszlopokat. Az oszlopok alapértelmezés szerint is reagálni fognak. Ha megtanulja, mikor használja az egyiket a másikkal szemben, az segít abban, hogy egy százalékos CSS-fejlesztővé váljon.