Css ile Renk Değiştiren Arkaplan Yapımı

Css ile arkaplan rengini belirlediğimiz renklerle sürekli değişmesini sağlayabiliriz. Değişme işlemi animasyonlu ve kendiliğinden gerçekleşecektir. Aşağıdaki kod sayesinde 15 saniyelik animasyonu 5 aşamaya bölüp her aşamada farklı bir arka plan kullanıyoruz. Başlangıç rengimiz yeşil 5 farklı renge büründükten sonra animasyonun tamamlanmasıyla yine yeşile dönüyor.

body{
background-color:green;
animation:image 15s infinite alternate;
-webkit-animation:image 15s infinite alternate;
-modz-animation:image 15s infinite alternate;
}
@keyframes image{
0%{
background-color:#F69D3A;
}
25%{
background-color:#3A93F6;
}
50%{
background-color:black;
}
75%{
background-color:#E2DE6A;
}
100%{
background-color:#AB1323;
}
}

Bu işlemi resim olarakta yapabiliriz. Arkaplana tanımlayacağımız resimlerin sürekli olarak değişmesini sağlayabiliriz.

body{
background-image: url("resim1.jpg");
animation:image 15s infinite alternate;
-webkit-animation:image 15s infinite alternate;
-modz-animation:image 15s infinite alternate;
}
@keyframes image{
0%{
background-image: url("resim2.jpg");
}
25%{
background-image: url("resim3.jpg");
}
50%{
background-image: url("resim4.jpg");
}
75%{
background-image: url("resim5.jpg");
}
100%{
background-image: url("resim6.jpg");
}
}
Kazım Uslu

Kazım Uslu

Php, Javascript, C# gibi yazılım dillerine kendini adamış başarılı bir Webmaster.

You may also like...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir