Arkaplan Renkleri Animasyon / Background Color Animation - HTML5 - CSS3 - Ders24
Bu video uygulamamızda arka planımızda 10 adet bar oluşturduk ve bu renkler arasındaki geçişler ile web sitelerinizde kullanabileceğiniz bir animasyonlu arka plan çalışması yaptık. Videolarımızın devamı için kanalımıza abone olmayı unutmayın ;)
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<title>Background</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</head>
</html>
CSS İÇERİĞİ:
body{
margin: 0;
padding: 0;
}
ul{
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
display: flex;
}
ul li{
list-style: none;
width: 10%;
height: 100%;
background: transparent;
box-shadow: 5px 0 5px rgba(0,0,0,0.2);
animation: backG 4s linear infinite;
}
@keyframes backG{
0%{background: #bb0000;}
20%{background: #3b5998;}
40%{background: #bc2a8d;}
60%{background: #fb8f3d;}
80%{background: #ff3a00;}
100%{background: #7B0099;}
}
ul li:nth-child(1){
animation-delay: .2s;
}
ul li:nth-child(2){
animation-delay: .4s;
}
ul li:nth-child(3){
animation-delay: .6s;
}
ul li:nth-child(4){
animation-delay: .8s;
}
ul li:nth-child(5){
animation-delay: 1s;
}
ul li:nth-child(6){
animation-delay: 1.2s;
}
ul li:nth-child(7){
animation-delay: 1.4s;
}
ul li:nth-child(8){
animation-delay: 1.6s;
}
ul li:nth-child(9){
animation-delay: 1.8s;
}
ul li:nth-child(10){
animation-delay: 2s;
}
Yorumlar
Yorum Gönder