Mérei Tamás webdesigner   »   HTML, CSS   »   CSS transition

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ó

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

  1. 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…

  2. 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.

  3. 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.

  4. 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
  5. 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.

  6. 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.

  7. 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.

  8. 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
  9. 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
  10. 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.

  11. 2013. július 14. vasárnap - 09:26

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

    Válasz

Hozzászólás

  Adatvédelmi nyilatkozat

Keresés a blogon
Kategóriák
Legújabb hozzászólások