-- CSS3 & HTML5

CSS ile Otomatik Değişen Arka Plan Yapmak

Merhaba arkadaşlar bu dersimde sizlere CSS ile Resimlerimizin veya bir arka plan renginin nasıl otomatik değişeceğini videolu olarak anlatacağım, İyi Seyirler…

 

 

CSS ile Otomatik Değişen Arka Plan Yapmak

HTML Kodları

HTML sayfasında aşağıdaki gibi sadece style.css dosyamı çağırıyorum.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>CSS ile Değişen Arkaplan Yapımı </title>
  <!-- www.dogukanbatal.com -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

 

CSS Kodları(Resim Değişimi)

style.css dosyamda body etiketine bir resim tanımladım daha sonra keyframes ile belirli aralıklarda diğer resimleri ekledim değiştirdim.

body{
	background:url("images/1.jpg");
	animation:image 5s infinite alternate;
	-webkit-animation:image 5s infinite alternate;
	-moz-animation:image 5s infinite alternate;
}
@keyframes image{
	0%{
		background:url("images/1.jpg");
	}

	25%{
		background:url("images/2.jpg");
	}

	50%{
		background:url("images/3.jpg");
	}

	75%{
		background:url("images/4.jpg");
	}

	100%{
		background:url("images/5.jpg");
	}
}

 

 

CSS Kodları(Renk Değişimi)

style.css dosyamda body etiketine siyah bir renk verdim daha sonra keyframes ile belirli aralıklarda renkleri değiştirdim.

body{
	background-color:black;
	animation:image 10s infinite alternate;
	-webkit-animation:image 10s infinite alternate;
	-moz-animation:image 10s infinite alternate;
}
@keyframes image{
	0%{
		background-color:red;
	}

	25%{
		background-color:blue;
	}

	50%{
		background-color:yellow;
	}

	75%{
		background-color:green;
	}

	100%{
		background-color:pink;
	}
}