<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width,
        initial-scale=1.0"/>
        <title>Baloncuk</title>
        <link rel="stylesheet" href="app.css"/>
        
    </head>

    <body>
        <div class="container">  </div>

        <script src="app.js"></script>
    </body>
</html>
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    background: rgb(26, 24, 24);
}

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.container span {
    position: absolute;
    background: transparent;
    box-shadow: inset 0 0 20px #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    animation: anime 2s linear infinite;
    -webkit-animation: anime 2s linear infinite;
}

.container span::before {
    content: "";
    width: 100%;
    height: 100%;
    background: radial-gradient(#fff, transparent);
    display: block;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transform: scale(0.5) translate(-30%, -20%);
    -webkit-transform: scale(0.5) translate(-30%, -20%);
    -moz-transform: scale(0.5) translate(-30%, -20%);
    -ms-transform: scale(0.5) translate(-30%, -20%);
    -o-transform: scale(0.5) translate(-30%, -20%);
}


/* animasyon*/

@keyframes anime {
    0% {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        opacity: 1;
    }
    100% {
        transform: translateY(1200%);
        -webkit-transform: translateY(1200%);
        -moz-transform: translateY(1200%);
        -ms-transform: translateY(1200%);
        -o-transform: translateY(1200%);
        opacity: 0;
    }
}
function baloncuklar() {
    const container = document.querySelector(".container"); //container classın değişkene atıyoruz.
    const baloncuk = document.createElement("span"); //element oluşturuyoruz
    const boyut = Math.random() * 50; //baloncuklar ıcın rastgele boy alıyoruz.


    baloncuk.style.width = boyut + "px"; //baloncuklara genişlik veriyoruz
    baloncuk.style.height = boyut + "px"; //baloncuklara yükseklil veriyoruz
    baloncuk.style.left = Math.random() * innerWidth + "px"; //Baloncukların ekranın neresınde geleceğini ayarlıyoruz.



    container.appendChild(baloncuk); // Container classına eklemesini yapıyoruz.
    setTimeout(() => { //baloncukların ne zaman kaybolacağını ayarlıyoruz
        baloncuk.remove
    },1);

}
// fonksiyonumuzu belirli bir döngüde calıstırmak ıcın setIntervalı kullanıyoruz
setInterval(baloncuklar, 7000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.