Igen szinte mindent meg lehet már CSS-el oldani. Más kérdés, hogy komolyabb animációknál a könnyebb kódolás érdekében szoktak használni valamilyen JS segédkönyvtárat, mint pl. a GSAP, amiről találsz egy egész friss videót az oldalon.
CSS transition
Bevezetés a CSS3 animáció világába. Micsoda megváltás lesz, ha mindenki HTML5 + CSS3 támogató böngészőt fog végre használni 🙂
A lenti forráskód néhány helyen eltér attól amit a videóban írtam. Utólag vettem észre, hogy néhány helyen lehet még rajta tömöríteni.
A működő kódot ide kattintva tudod megnézni.
Videó
HTML forráskód
<html>
<head>
<meta charset="utf-8"/>
<title>CSS transition</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<section id="wrapper">
<h1>CSS3 transition</h1>
<div class="box effect-1">
<img src="1.png" alt=""/>
<div>elso</div>
</div>
<div class="box effect-2">
<img src="2.png" alt=""/>
<div>masodik</div>
</div>
<div class="box effect-3">
<img src="3.png" alt=""/>
<div>harmadik</div>
</div>
<div class="box effect-4">
<img src="4.png" alt=""/>
<div>negyedik</div>
</div>
</section>
</body>
</html>
CSS forráskód
* { margin: 0; padding: 0; border: 0 }
body {
font: 18px 'Lucida Sans Unicode';
color: #fff;
background: #f6f6f6;
background: linear-gradient(to bottom, #f5f6f6 0%,#c4c4c4 100%) fixed
}
section#wrapper {
width: 1000px;
margin: 100px auto 0 auto;
}
h1 {
font-size: 50px;
color: #707070;
text-align: center
}
div.box {
width: 200px;
height: 200px;
float: left;
margin: 50px 20px 0 20px;
border: 5px solid #fff;
border-radius: 105px;
overflow: hidden;
box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
position: relative
}
div.box img { border-radius: 100px }
div.box div {
width: 200px;
height: 105px;
background: #000;
text-align: center;
border-radius: 100px;
padding: 95px 0 0 0
}
div.effect-1 div {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 500ms;
}
div.effect-1 div:hover { opacity: 0.8 }
div.effect-2 img {
position: absolute;
top: 0;
left: 0;
transition: margin-left 800ms
}
div.effect-2:hover img { margin-left: 200px }
div.effect-3 div {
position: absolute;
opacity: .8;
top: 0;
left: 0;
margin-left: -200px;
transition: margin-left 500ms
}
div.effect-3:hover div { margin-left: 0 }
div.effect-4 img {
position: absolute;
top: 0;
left: 0
}
div.effect-4 div {
opacity: .8;
transform: scale(0);
transition-duration: 500ms;
-webkit-transform: scale(0)
}
div.effect-4:hover div {
transform: scale(1);
-webkit-transform: scale(1)
}
19 hozzászólás
-
-
-
2014. május 2. péntek - 18:00
Próbáltam a div-et egy A tag-be tenni, de az xhtml nem engedi…
Ha a képet linkelem, akkor a fölötte lévő “első” div miatt nem látható a link 🙁
Van erre vmi megoldás?-
-
2014. május 29. csütörtök - 21:22
Az onclick=”javascript:window.location.href=’xxxxxxxxxxxxx'” -et találtam erre… vagy az nem vmi okos megoldás?
-
-
-
2014. április 13. vasárnap - 13:50
hello, I from BRAZIL.
I loved your slide.
I have a doubt;
how do I decrease the size of the background.
Luciano Cipriano
Brazil
-
-
2013. július 17. szerda - 17:43
Azt hogyan lehet megoldani, hogy ha rákattintok megnyíljon egy oldal?
-
-
2013. július 16. kedd - 19:08
Szia, az normális működés, hogyha egy 2px szegélyű div-re positionnal “ráhúzom” a benne lévő másik, szintén 2px szegélyű div-et, akkor a felül lévő div a szegély szélességével jobbra és lefelé elcsúszva jelenik meg? Vagy én toltam el valamit? Jó megoldás erre a -2px-es top és left beállítás?
-
-
2013. július 16. kedd - 17:11
Köszi a videót!
És azt szeretném kérdezni hogy a less cssről is készítesz majd videót?
-
-
2013. július 14. vasárnap - 14:31
Nem semmi. Köszönöm, hogy megosztottad. Remélem ha az időd engedi lesz még mit tanulni tőled. 🙂
-
2013. július 14. vasárnap - 11:19
Időközben azt sikerült megoldanom. Nagyon jó, köszi szépen a tutorialt.
-
2013. július 14. vasárnap - 11:14
Helló szeretném kérdezni hogy azt meglehet csinálni hogy ezek a képek linkeljenek?
-
2013. július 14. vasárnap - 09:26
Remek videó!
Csodálatosan néz ki! 😉
Keresés a blogon
Kategóriák
Legújabb hozzászólások
-
A villanyszerelés örömei panelben
Ha három fázisod van, akkor három fázisú Fi relét kell venni....
-
A villanyszerelés örömei panelben
Szia, ha panellakásba három vezetéken jön be az egy fázis, akkor három fi relét kellene berakni?...
-
A villanyszerelés örömei panelben
"3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezetéken jön az N és...
-
Dia szkennelés házilag
Ezt a fajtát nem tudom, hogy lehet még kapni. Normál diavetítőt lehet kapni nagyobb játékboltokban például....
-
Bootstrap carousel
Ennél a réginél nem tudom, hogy volt e már ilyen opció, de az újnál már van olyan, hogy touch="true"...
-
Adobe XD VS. Lunacy
Sketch-et nem használok, mert nincs mac-em. Axure-t használok, arról találsz anyagot az oldalon....
-
Adobe XD VS. Lunacy
Kedves Cyrex! A Sketch és az Axure UX-UI designer programok? Te melyiket használod ha használsz ilyen programokat? Köszönöm, üdv Balázs...
-
Bootstrap carousel
Kedves Tamás! Az megoldható, hogy mobilon ne a nyilakra koppintva, hanem ujjal húzva váltsam a képeket? Köszönöm a sok hasznos videót. Üdvözlettel:...
-
Dia szkennelés házilag
Ilyen diavetítőt hol lehet beszerezni?...
-
A villanyszerelés örömei panelben
Ha nincsen a házban központilag rendbe rakva, akkor veszett fejsze nyele... Kialakíthatsz otthon EPH sínt, de ez már egy másik szint. 7kW felett 10m...
-
A villanyszerelés örömei panelben
Ez a kábelcsatornás szegőléc nagyon jól néz ki. Szinte biztos, hogy a fürdő / konyha földelése lesz. Máshova nem vittek régen földet. Ha te húzod be a...
-
A villanyszerelés örömei panelben
Köszönöm a gyors választ, akkor megpróbálom multiméterrel megkeresni, remélem csak a fürdő és a konyha földelését vitték innnen, nem a szomszéd lakásé...
Szia,
Rengeteget tanultam a videóidból, köszönöm.
Az volna a kérdésem, hogy CSS3-al azok az effektek is megoldhatóak, mint amilyet néhány oldalon látok, miszerint a tmbnail-re víve az egeret, maga a kép mérete változik, vagy forog, vagy az egeret mozgatva ide-oda billeg, vagy ehhez js, vagy vmi más kell?