SEO (Arama Motoru Optimizasyonu) Mikro İnteraktif ÜCRETSİZ - Google Play'den İndirin

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ı];
}

Örneklerle daha iyi anlamaya çalışalım.
İlgili elementin üzerine gelince 0.4 saniye gecikmeli olarak toplamda 1 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;
   height:60px;
   transition:1s ease;
}
Örnek 2
www.ontedi.com

Son olarak bir buton efekti vermeye çalışalım.
Örnek 3 Kod
.css3-transitions-ornek3
{
   background:red;
   color:#fff;
   padding:3px;
   transition:1s ease all;
}
.css3-transitions-ornek3:hover
{
   background:blue;
   color:red;
}
Örnek
www.ontedi.com

Yorumlar

Yorum Yaz

Avatar

REKLAM

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

REKLAM

En Yeni Çizgi Filmler, Masallar ve Etkinlikler

REKLAM

SEO-Arama Motoru Optimizasyonu Uygulaması

REKLAM

Hayvan Sesleri Uygulaması

REKLAM

Çocuk Etkinlikleri Uygulaması

EN

  • Popüler
  • Yeni
  • Son Yorum