İlk yapmamız gereken şey ise css kodları.
.logo a:link{Üsteki kodu blogger veya wordpress panelinizden css bölümüne ekleyin. Daha sonra bunu logomuzu hareketlendirmek için gerekli bazı işlemler geri kalıyor.
transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
}
.logo{height:120px;text-align:left;color:#fff;overflow:hidden;float:left;-webkit-transition:all .9s ease-out;-moz-transition:all .9s ease-out;-ms-transition:all .9s ease-out;-o-transition:all .9s ease-out;transition:all .9s ease-out}
.logo a:hover{
filter: blur(1.5px);
-moz-filter: blur(1.5px);
-webkit-filter: blur(1.5px);
-o-filter: blur(1.5px);
}
.logo:hover{margin-left:30px;-webkit-transition:all .9s ease-out;-moz-transition:all .9s ease-out;-ms-transition:all .9s ease-out;-o-transition:all .9s ease-out;transition:all .9s ease-out}
Aşağıda 2 örnek göstereceğim size hangisi uygun gelirse onu kullanın.
<img class='logo' src='Logo URL'/>
class='logo' olan yer logomuzu hareket ettirecek html kod. Birde aşağıdaki diğer yöntemi yapabilirsiniz.<div class='logo'><img src='Logo Url'/></div>
Bir diğer örneğimizde buydu. Yani şu şekilde css kodlarını ekledikten sonra bu 2 koddan kırmızı ile işaretlediğim kodları logonuzun olduğu html kodunun içine veya 2. örnekte verdiğim gibi yapabilirsiniz.
0 yorum:
Yorum Gönder