Css'te navigation menüdeki son li'ye nasıl animasyon eklenebilir?

Question

Merhabalar,
Arkadaşlar nav menudeki indirimli ürünler li'sine siteye girer girmez sürekli arka planının değişmesini istiyorum. Şu sitede gördüm ve çok sevdim. Bunu nasıl yapabilirim?

ErenDemir · Accepted Answer

angelicmoon adlı üyeden alıntı:						mesajı görüntüle									Hocam bu benim istediğim şeye benzer bir şey fakat bu değil. Yani belki de budur fakat ben yapamıyorum. keyframes'te border ekleyemiyorum ve onu renklendiremiyorum. Bir sürü kaynağa baktım herkes ya width height değerini değiştirip renklendirmiş ya da büyütüp küçültmüş. 		Buyrun örnek basit bir şey paylaşıyorum.
      li:last-child {
         border: 2px solid red;
         animation: 1s anim linear;
      }
      @keyframes anim {
         0% {
            border: 2px solid red;
         }
         25% {
            border: 2px solid green;
         }
         50% {
            border: 2px solid blue;
         }
         75% {
            border: 2px solid green;
         }
         100% {
            border: 2px solid red;
         }
      }

TPKmedya · Answer

:nth-child() özelliği kullanabilirsin

angelicmoon · Answer

TPKmedya adlı üyeden alıntı:						mesajı görüntüle									:nth-child() özelliği kullanabilirsin 		Hocam :last-child ile seçiyorum. Mesele nasıl yapacağım konusu  yani o animasyon nasıl veriliyor onu bilmiyorum.

ealgan · Answer

bu belki işinizi görebilir
https://www.w3schools.com/cssref/try...css_animatable

umityildrim · Answer

Merhaba hocam. Bootstrap hazır kütüphanesiyle yapabilirsiniz. Bootstrap Carousel örneğinde bulabilirsiniz. Ama kendiniz yapmak isterseniz resimleri sırayla göstermek için sıraladığınız resimlere Javascript ile zamanlayıcı eklemeniz gerekir. Yani "setTimeout" yapısını kullanmalısınız. Onun bir örneğini aşağıda göstereyim:

var yaCikti = document.getElementById("ya_cikti_20220620_144341");

var zkZamanlayiciKimligi;

tsKarsila.onclick = function(){
 
  zkZamanlayiciKimligi = window.setTimeout(karsila, 3000);
  
}

function karsila(){
  yaCikti.innerHTML = 'Merhaba, Ümit';
}

angelicmoon · Answer

umityildrim adlı üyeden alıntı:						mesajı görüntüle									Merhaba hocam. Bootstrap hazır kütüphanesiyle yapabilirsiniz. Bootstrap Carousel örneğinde bulabilirsiniz. Ama kendiniz yapmak isterseniz resimleri sırayla göstermek için sıraladığınız resimlere Javascript ile zamanlayıcı eklemeniz gerekir. Yani "setTimeout" yapısını kullanmalısınız. Onun bir örneğini aşağıda göstereyim:

var yaCikti = document.getElementById("ya_cikti_20220620_144341");

var zkZamanlayiciKimligi;

tsKarsila.onclick = function(){
 
  zkZamanlayiciKimligi = window.setTimeout(karsila, 3000);
  
}

function karsila(){
  yaCikti.innerHTML = 'Merhaba, Ümit';
} 		Hocam menüler benim müdahale edemeyeceğim bir yerden geliyor. Sadece ul ya da li'yi :nt-child ya da :last-child ile seçebiliyorum

angelicmoon · Answer

ealgan adlı üyeden alıntı:						mesajı görüntüle									bu belki işinizi görebilir
https://www.w3schools.com/cssref/try...css_animatable 		Hocam bu benim istediğim şeye benzer bir şey fakat bu değil. Yani belki de budur fakat ben yapamıyorum. keyframes'te border ekleyemiyorum ve onu renklendiremiyorum. Bir sürü kaynağa baktım herkes ya width height değerini değiştirip renklendirmiş ya da büyütüp küçültmüş.

KOCABAL · Answer

Yardım etmeye gelmiştim, şimdi hanımdan trip yiyorum.

angelicmoon · Answer

KOCABAL adlı üyeden alıntı:						mesajı görüntüle									Yardım etmeye gelmiştim, şimdi hanımdan trip yiyorum. 		Yengeyi kızdırma hocam  
						ErenDemir adlı üyeden alıntı:						mesajı görüntüle									Buyrun örnek basit bir şey paylaşıyorum.
      li:last-child {
         border: 2px solid red;
         animation: 1s anim linear;
      }
      @keyframes anim {
         0% {
            border: 2px solid red;
         }
         25% {
            border: 2px solid green;
         }
         50% {
            border: 2px solid blue;
         }
         75% {
            border: 2px solid green;
         }
         100% {
            border: 2px solid red;
         }
      } 		Hocam harika istediğim bu fakat 1 kez dönüyor sonra bitiyor.

ErenDemir · Answer

Alıntı										Hocam harika istediğim bu fakat 1 kez dönüyor sonra bitiyor. 		Bu şekilde yaparsanız sürekli oynatır.
animation: 1s anim linear infinite;

KOCABAL · Answer

angelicmoon adlı üyeden alıntı:						mesajı görüntüle									Yengeyi kızdırma hocam

Hocam harika istediğim bu fakat 1 kez dönüyor sonra bitiyor. 		
İngilizcem kıt ama gereken kod sanırım infinite.

https://www.w3schools.com/cssref/try...css3_animation

angelicmoon · Answer

ErenDemir adlı üyeden alıntı:						mesajı görüntüle									Bu şekilde yaparsanız sürekli oynatır.
animation: 1s anim linear infinite; 		Hocam Allah razı olsun çok teşekkür ederim.

KOCABAL adlı üyeden alıntı:						mesajı görüntüle									İngilizcem kıt ama gereken kod sanırım infinite.

https://www.w3schools.com/cssref/try...css3_animation 		Hocam ilgin için teşekkür ederim. infiniteymiş evet. Yengeyi kızdırma avatara da bayıldım

angelicmoon · Answer

ErenDemir adlı üyeden alıntı:						mesajı görüntüle									Bu şekilde yaparsanız sürekli oynatır.
animation: 1s anim linear infinite; 								KOCABAL adlı üyeden alıntı:						mesajı görüntüle									İngilizcem kıt ama gereken kod sanırım infinite.

https://www.w3schools.com/cssref/try...css3_animation 		Bakın bakalım nasıl olmuş  border yerine box-shadow verdim. Daha hoş durdu.
Teşekkür ederim her şey için.