Resim Efekt Kodları | En iyi Sözler ve Blog Sitesi
Günün Sözü

Resim Efekt Kodları

Resim Efekt Kodları

Bu Yazımızda Resim Efekt Kodları, HTML Resim Efekt Kodları, Site Resim Efekt Kodları, Web Resim Efekt Kodları, Resim Sallandırma Kodu, Efektli Resim Değiştirme Kodu, Üstüne Geldiğinde Gölgeli Büyüyen Resim Kodu, Üstüne Geldiğinde Bilgi Çıkan Resim Kodu, Üstüne Geldiğinde Yanında Büyüğü Çıkan Resim Kodu, Üstüne Geldiğinde Dönen Paylaşım Butonları Kodu Yer Almaktadır.

Resim Efekt Kodları

Bu Yazımızda

Resim Efekt Kodları, HTML Resim Efekt Kodları, Site Resim Efekt Kodları, Web Resim Efekt Kodları, Resim Sallandırma Kodu, Efektli Resim Değiştirme Kodu, Üstüne Geldiğinde Gölgeli Büyüyen Resim Kodu, Üstüne Geldiğinde Bilgi Çıkan Resim Kodu, Üstüne Geldiğinde Yanında Büyüğü Çıkan Resim Kodu, Üstüne Geldiğinde Dönen Paylaşım Butonları Kodu

Detaylar Yazımızda…

 


Resim Sallandırma Kodu

 

<!— wWw.Eniyisozler.Net Kod Başlangıcı —>
<style>
.swing{
	-webkit-animation:swinging 10s ease-in-out 0s infinite;
	-moz-animation:swinging 10s ease-in-out 0s infinite;
	animation:swinging 10s ease-in-out 0s infinite;
	-webkit-transform-origin:50% 0;
	-moz-transform-origin:50% 0;
	transform-origin:50% 0;
}

@-webkit-keyframes swinging{
	0% { -webkit-transform: rotate(0); }
	5% { -webkit-transform: rotate(10deg); }
	10% { -webkit-transform: rotate(-9deg); }
	15% { -webkit-transform: rotate(8deg); }
	20% { -webkit-transform: rotate(-7deg); }
	25% { -webkit-transform: rotate(6deg); }
	30% { -webkit-transform: rotate(-5deg); }
	35% { -webkit-transform: rotate(4deg); }
	40% { -webkit-transform: rotate(-3deg); }
	45% { -webkit-transform: rotate(2deg); }
	50% { -webkit-transform: rotate(0); }
	100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes swinging{
	0% { -moz-transform: rotate(0); }
	5% { -moz-transform: rotate(10deg); }
	10% { -moz-transform: rotate(-9deg); }
	15% { -moz-transform: rotate(8deg); }
	20% { -moz-transform: rotate(-7deg); }
	25% { -moz-transform: rotate(6deg); }
	30% { -moz-transform: rotate(-5deg); }
	35% { -moz-transform: rotate(4deg); }
	40% { -moz-transform: rotate(-3deg); }
	45% { -moz-transform: rotate(2deg); }
	50% { -moz-transform: rotate(0); }
	100% { -moz-transform: rotate(0); }
}

@keyframes swinging{
	0% { transform: rotate(0); }
	5% { transform: rotate(10deg); }
	10% { transform: rotate(-9deg); }
	15% { transform: rotate(8deg); }
	20% { transform: rotate(-7deg); }
	25% { transform: rotate(6deg); }
	30% { transform: rotate(-5deg); }
	35% { transform: rotate(4deg); }
	40% { transform: rotate(-3deg); }
	45% { transform: rotate(2deg); }
	50% { transform: rotate(0); }
	100% { transform: rotate(0); }
}
</style>
<img class="swing" src="Resim Linkini Buraya Yazınız." /> 
<img class="swing" src="Resim Linkini Buraya Yazınız." style="
	animation-delay: 0.8s;
	-webkit-animation-delay: 0.8s;
	-moz-animation-delay: 0.8s;
	animation-delay: 0.8s;
	"
/> 
<img class="swing" src="Resim Linkini Buraya Yazınız." style="
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	animation-delay: 0.5s;
	"
/>
<!— wWw.Eniyisozler.Net Kod Sonu —>

Efektli Resim Değiştirme Kodu

 

<!— wWw.Eniyisozler.Net Kod Başlangıcı —>
<style>

.pulloutimage{
  position: relative;
}

.pulloutimage img{
  position: absolute;
  left: 0;
}

.pulloutimage img.ondemand{
  opacity: 0;
  visibility: hidden;
}

.pulloutimage img.original{
  z-index: 1;
}


@-webkit-keyframes revealfromright{
  0%{
  z-index: -1;
  opacity: 0;
  }
  50%{
  opacity: 1;
  z-index: -1;
  left: 100%;
  box-shadow: none;
  }
  51%{
  z-index: 2;
  }
  100%{
  left: 0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-moz-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-ms-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}

.pulloutimage:hover img.ondemand{
  -webkit-animation-name:revealfromright;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  
  -moz-animation-name:revealfromright;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
  
  -ms-animation-name:revealfromright;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
  
  animation-name:revealfromright;
  animation-duration: 1s;
  animation-iteration-count: 1;
  
  visibility:visible;
  opacity:1;
  box-shadow: 8px 8px 15px gray;
  z-index:2;
}

.pulloutimage:hover img.original{
  opacity:0.5;
}

</style>

<div class="pulloutimage" style="width:330px; height:200px">
<img class="original" src="Resim Linkini Buraya Yazınız." />
<img class="ondemand" src="Resim Linkini Buraya Yazınız." />
</div>
<!— wWw.Eniyisozler.Net Kod Sonu —>

Üstüne Geldiğinde Gölgeli Büyüyen Resim Kodu

 

<!— wWw.Eniyisozler.Net Kod Başlangıcı —>
<style type="text/css">

.css-gallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.css-gallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

</style>

<div class="css-gallery">
<img src="Resim Linkini Buraya Yazınız." />
<img src="Resim Linkini Buraya Yazınız." />
</div>
<!— wWw.Eniyisozler.Net Kod Sonu —>


Bu yazı 152 kez okundu.
Bu İçeriğe Tepkin Ne Oldu?


YAZAR HAKKINDA

Yahya Güloğlu Yahya Güloğlu Güzel Sözler, Mesajlar, Yemek Tarifleri, Şiirler, Burçlar, Burç Uyumları, Emojiler, Resimli Sözler, Resimli Şiirler Sitemizde Yer Almaktadır... Sağlık, Moda, Cilt Bakımı, Güzellik, Cinsellik, Örgü, Bayanlara Özel, El İşleri, Zayıflama Yöntemleri, Ekonomi, Finans, Kredi, Teknoloji, Bankacılık, Diyet, Gezi, Seyahat Gibi Sizlere Küçük Ama Etkili Önerileri Sitemizde Bulabilirsiniz. Yararlı Bilgiler Yazılarımız Tamamıyla Eniyisozler.Net İçin Uzman Yazarlar Tarafından Hazırlanmaktadır. Bu Alanda Yer Alan Bilgiler Bir Öneridir. Özgün Ve Siteye Özel Olarak Yazılmıştır.
Sosyal Medyada Paylaşın:

BİRDE BUNLARA BAKIN

Abone Ol
Bildir
guest
Zorunlu
Zorunlu
0 Yorum
Satır İçi Geri Bildirimler
Tüm yorumları görüntüle
Sponsorlu Bağlantılar
  • ÇOK OKUNAN
  • YENİ
  • YORUM
0
Düşüncelerinizi yazmak istermisiniz? Lütfen yorum yapın.x
()
x