Link, Türkçe anlam olarak İlişim ya da Bağlantı demektir. İnternet sayfalarında hypertext kullanılarak kullanıcının başka bir web sayfasına ya da uygulamaya yönlenmesini sağlayan bir bağlantıdır. Bu bağlanan web sayfaları aynı websitesi üzerinde olabileceği gibi başka bir websitesinde yani başka bir adreste de olabilir. İnternette dolaşmayı bu linkleri kullanarak yapıyoruz. Genelde sitelerde Linkler renkleri mavi ve altı çizili olarak görünür. Aşağıda vereceğim CSS3 animasyon kodları sayesinde linklerinizin üzerine gelindiğinde gökkuşağı gibi çesitli renklere dönüşecek. Tüm tarayıcılarda uyumlu, olan bu eklenti sitenize renk katacak. CSS3 Animasyon ile Hover Bağlantı Gökkuşağı Renk Efekti sitenizde büyük yer kaplamaz ve sitenize girenler üzerinde hoş bir etki yaratır.
Blogger için Hover Bağlantı Rengi Ekleme
- Blogger panelinize giriş yapın
- Şablon → HTML'yi Düzenle
- Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun.
- Ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.
@keyframes MEFhovergokkusagi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-o-keyframes MEFhovergokkusagi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-ms-keyframes MEFhovergokkusagi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-moz-keyframes MEFhovergokkusagi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-webkit-keyframes MEFhovergokkusagi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
a:hover{
animation:MEFhovergokkusagi 4s infinite; /* Standart */
-o-animation:MEFhovergokkusagi 4s infinite; /* Opera */
-ms-animation:MEFhovergokkusagi 4s infinite; /* IE */
-moz-animation:MEFhovergokkusagi 4s infinite; /* Firefox */
-webkit-animation:MEFhovergokkusagi 4s infinite; /* Safari ve Chrome */
}
- Şablonu Kaydet diyip çıkıyoruz. Bu kadar.
Hover Metin Link Gökkuşağı Etkisi için CSS3 animasyonu kullanır:
- CSS3 animasyonunu Tüm tarayıcılar desteklemektedir.
- Hala eski tarayıcıları kullanıyorsanız Mozilla Firefox gibi güçlü bir tarayıcıyı hemen indirin.
- CSS3 animasyon kodunu kullanarak daha verimli ve özlü yapılmış, bu yüzden blog yükleme çok etkilenmez hale gelir.
- Bloggerda gökkuşağı etkisi yaratmak, çeşitli renkler oluşturmak için CSS3 kodu kullanma kolay bi yöntemdir.
- Blogcular için Yeni efektler (ek bir etki) çeşitliliğini geliştirmek için CSS3 animasyon kodunu kullanabilirler.
Hiç yorum yok:
Yorum Gönder