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

Resim Efekt Kodları

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

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ı 638 kez okundu.

Bu İçeriğe Tepkin Ne Oldu?

Sosyal Medyada Paylaşın:

SON EKLENENLER

Abone Ol
Bildir
guest
0 Yorum
Satır İçi Geri Bildirimler
Tüm yorumları görüntüle
Sponsorlu Bağlantılar
  • ÇOK OKUNAN
  • YENİ
  • YORUM
2020-08-05 21:31:46
Gökçe Leyla: ÖZGÜRLÜK HERKES İÇİN Bir umuttur özgürlük yaşayan her insan için. Hayata tutunmayı sağlayan. Bir
2020-08-04 23:10:32
Sezen: :D :D :D
2020-07-31 22:47:55
Sıla: :D
2020-05-31 00:27:49
2020-04-09 19:23:59
2020-04-09 19:17:59
0
Düşüncelerinizi yazmak istermisiniz? Lütfen yorum yapın.x
()
x