Baloncuklar Yapmak / Bubble Animation - HTML5 - CSS3 - Ders25
Bu video uygulamamızda sizler için güzel bir arkaplan daha yaptık ve keyframes ile div leri hareketlendirdik. Bu uygulama ile web sitenizi yaparken güzel bir animasyon elde edebilirsiniz geliştirip yatacılığınız ile farklı uygulamalar ortaya koyabilirsiniz.
Kanalımıza abone olun ve yeni videolardan haberdar olun.
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<title>Baloncuk</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<body>
<ul class="baloncuk">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</head>
</html>
CSS İÇERİĞİ:
body{
margin: 0;
padding: 0;
background-color: lightblue;
overflow: hidden;
}
.baloncuk{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
transform: translateZ(0);
}
.baloncuk li{
position: absolute;
list-style: none;
display: block;
background-color: rgba(0,0,0,0.2);
bottom: -100px;
animation: balon 10s infinite;
animation-timing-function: linear;
}
.baloncuk li:nth-child(1){
width: 40px;
height: 40px;
left: 20%;
border-radius: 50%;
}
.baloncuk li:nth-child(2){
width: 80px;
height: 80px;
left: 35%;
border-radius: 50%;
animation-delay: 2s;
animation-duration: 20s;
}
.baloncuk li:nth-child(3){
width: 15px;
height: 15px;
left: 55%;
border-radius: 50%;
animation-delay: 6s;
animation-duration: 17s;
}
.baloncuk li:nth-child(4){
width: 60px;
height: 60px;
left: 65%;
border-radius: 50%;
animation-delay: 1s;
animation-duration: 10s;
}
.baloncuk li:nth-child(5){
width: 20px;
height: 20px;
left: 85%;
border-radius: 50%;
animation-delay: 4s;
animation-duration: 16s;
}
@keyframes balon{
0%{ transform: translateY(0);}
100%{ transform: translateY(-800px);}
}
Yorumlar
Yorum Gönder