CSS transition

2013-07-13

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)
}

22 hozzászólás

2019. november 28. csütörtök - 21:41

Kedves Tamás!
Remélem még aktív a blog és tudsz nekem segíteni.
Nagyon tetszett a videód, ki is próbáltam.
A videód alapján beépitettem ezeket az effekteket, felül elhelyezkedik egy fix menüsor… ami viszont görgetéskor a körök mögé kerül, mikor azok a menühöz érkeznek.
valami a pozionálással nem stimmel, de ha az egyik jó , akkor kiesik egy másik funkció.
Van ötleted?
Nagyon köszönöm előre is!

Válasz
- 2019. november 29. péntek - 09:22
  
  z-index-et állíts be a menüre, és arra is ami most fölé kerül. Értelemszerűen a menün legyen a magasabb érték.
- 2019. november 30. szombat - 16:01
  
  Köszönöm a válaszod!
  Igen ezzel már, próbálkoztam, de amint sikrül térben elhelyezni a megfelelő helyre a köröket, megszűnik működni rajtuk az effekt…
2015. március 11. szerda - 13:38

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?

Válasz
- 2015. március 20. péntek - 21:06
  
  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.
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?

Válasz
- 2014. május 28. szerda - 22:37
  
  És mi van, ha a befoglaló DIV-et cseréled le A tag-re úgy, hogy display:block-ra állítod. Onnantól kezdve ugyanúgy működik, mint a DIV, csak tud linkelni.
- 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. június 3. kedd - 19:58
  
  Nem kell JS, úgy csináld ahogy írtam: div class=box effect-1 helyett a class=box-efect-1 legyen, és az A-t állítsd display:block-ra.
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

Válasz
- 2014. április 13. vasárnap - 15:57
  
  Hy! There’s a new property in CSS3 named background-size. All modern browsers support it (including IE9). Here’s some information: http://www.w3schools.com/cssref/css3_pr_background-size.asp
2013. július 17. szerda - 17:43

Azt hogyan lehet megoldani, hogy ha rákattintok megnyíljon egy oldal?

Válasz
- 2013. július 18. csütörtök - 12:57
  
  Tedd be a DIV-et egy A tagbe.
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?

Válasz
- 2013. szeptember 2. hétfő - 16:16
  
  Ezt most így nem tudom elképzelni, de, ha mindegyik böngészőben működik a mínuszos megoldás amit írsz akkor simán lehet használni ilyesmi hack-eket.
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?

Válasz
- 2013. szeptember 5. csütörtök - 14:16
  
  Kb. öt évre elegendő ötletem van, hogy miről kellene anyagot készíteni 🙂 Nem azért nem frissül gyakrabban a blog, mert nincs ötletem, hanem mert kevés időm van vele foglalkozni sajnos.
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. 🙂

Válasz
2013. július 14. vasárnap - 11:19

Időközben azt sikerült megoldanom. Nagyon jó, köszi szépen a tutorialt.

Válasz
2013. július 14. vasárnap - 11:14

Helló szeretném kérdezni hogy azt meglehet csinálni hogy ezek a képek linkeljenek?

Válasz
- 2014. január 26. vasárnap - 17:31
  
  Szia!
  
  Meg lehet persze!
  Az img tagot tedd bele egy a tag-be!
  
  és igy már linkelhető is a kép 🙂
  
  bár késön irom a választ,remélem segit! 🙂
  
  Üdv.
2013. július 14. vasárnap - 09:26

Remek videó!
Csodálatosan néz ki! 😉

Válasz

Keresés a blogon

Kategóriák

HTML, CSS (52)
Photoshop (33)
Egyéb (18)
jQuery (13)
WordPress (6)
Flash (4)
Illustrator (3)
PHP (2)
InDesign (1)

Legújabb hozzászólások

A villanyszerelés örömei panelben
Gratulálok! Szép leírás! Azt szeretném kérdezni, hogy nálam 3×32 amper lessz, bővítés után. Laikusként kérdem, így három Fi-relé kell? És mekkorát, é...
A villanyszerelés örömei panelben
@Utolsó hozzászóló: Szia, olyan nincs, hogy 3 fázis érkezik be 3 külön vezetéken. Vagy 1 fázis 1, vagy 3 fázis 3 vezetéken. (+ a nulla) Ha az óráná...
A Pico CMS
pico-release-v2.1.0, nincs benne content-samle, a content üres, nincs benne php nincs sub mappa és fájl sem, mégis ott van a subindex a menunuben...
CSS transition
Köszönöm a válaszod! Igen ezzel már, próbálkoztam, de amint sikrül térben elhelyezni a megfelelő helyre a köröket, megszűnik működni rajtuk az effek...
CSS transition
z-index-et állíts be a menüre, és arra is ami most fölé kerül. Értelemszerűen a menün legyen a magasabb érték....
CSS transition
Kedves Tamás! Remélem még aktív a blog és tudsz nekem segíteni. Nagyon tetszett a videód, ki is próbáltam. A videód alapján beépitettem ezeket az ...
A villanyszerelés örömei panelben
Egy fázis jön be három vezetéken keresztül. Az óránál egy darab megszakító van csak. Ezért kérdeztem, hogy milyen fi relét javasoltok?...
A villanyszerelés örömei panelben
Ez nem igaz, mert az óránál ott a 3 biztosító darabja 20 A...
A shape-outside CSS property
Olyasmit találtam hogy a szöveg részt 2 részre osztjuk bal és jobb......
Responsive menü
Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...
Responsive menü
Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...
A shape-outside CSS property
Szerintem azt sehogy....

CSS transition

Videó

HTML forráskód

CSS forráskód

22 hozzászólás

Hozzászólás mégsem