CSS3'te Transitions (Geçişler) Örnekleri 1

CSS3 ile html elementlerine çeşitli efektler (geçiş efektleri) uygulama örnekleri

Anlatımı
.ilgili-element-sinifi {
    transition: [özellikleri] [süresi] [zamanlama fonksiyonu] [gecikme zamanı];
}
İlgili elementin üzerine gelince 0.4 saniye gecikmeli olarak toplamda 6 saniyede yazı rengi değişimi olacaktır.
Örnek 1 CSS
a
{
 padding:5px;
 background:red;
 color:white;
 font-size:20px;
 transition-property:color;
 transition-delay:0.4s; /*0.4. saniyeden itibaren başla*/
 transition-duration:6s; /*6 saniyede olayı tamamla*/
}
a:hover
{
 color:black;
}
Örnek 1 HTML
 <a>Link<a>
Örnek 1

İlgili elementin üzerine gelince 1sn gecikmeli olarak genişlik ve yükseklik değişimi olacaktır. Elementi mouse terk edince eski haline 1sn gecikmeli olarak geri dönecektir.
Örnek 2 Kod
.css3-transitions-ornek2
{
 background:red;
 width:200px;
	height:40px;
	color:#fff;
	padding:3px;
	font-family:'Arial';
	transition-property:width;/*Geçişin width üzerinde olmasını belirtiyoruz*/
	transition:1s ease;
}
.css3-transitions-ornek2:hover
{
	width:250px;
	transition:1s ease;
}
Örnek 2
www.ontedi.com
Örnek
www.ontedi.com

Yorumlar

Henüz hiçbir yorum yazılmamış. İlk yorumu siz yapın.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

EN

  • Popüler
  • Yeni
  • Son Yorum