CSS3 ile Üzerine Gelindiğinde Değişen Resim Kodu
Gün geçtikçe kullanımı artan CSS ile harikalar yaratılıyor diyebilirim. CSS hakkında fazla bilgisi olmayan arkadaşlar için basit bir kod hazırladım. Hazırladığım kod birçok yerde kullanılan, üzerine gelindiğinde değişen resim kodu ancak ben biraz farklılık kattım. Farklı olmasından kastım efektler ile daha iyi bir hale getirmem. Ben eskiden kullandığım logoları resim olarak kullandım. Siz kodlardan kendiniz değiştirebilir, ön izlemeyi ve kodları aşağıda görebilirsiniz. Güle güle kullanın.
KODLAR
<style>
.uzerinegelincedegisenresim {
width: 300px;
height: 100px;
background: url(http://i.hizliresim.com/xV3pWj.png);
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.uzerinegelincedegisenresim:hover {
width: 220px;
height: 60px;
background: url(http://i.hizliresim.com/eXEWr0.png);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<div class="uzerinegelincedegisenresim"></div>
Bu yazı hakkında yorum yap
2 yorum
Çok Saol Ya Baya Yardımcı Oldun
Önemli Deil :)
Sadece yazı ile ilgili yorumlar atınız.
Soru&Sorunlarınız için yorum kısmını değil İletişim kısmını kullanınız.