Untitled

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style id="my-style">
        html,
body,
#bubbles { height: 100% }
body { overflow: hidden }
#bubbles { padding: 100px 0 }
.bubble {
    background: #ffb200;
    border-radius: 50%;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    position: absolute;
}
@-webkit-keyframes moveclouds {
    0% {
        top: 1200px;
    }
    100% {
        top: -100px;
    }
}

@-webkit-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:650px;
    }
}
    </style>
</head>
<body>
    <div id="bubbles">

    </div>
    <script src="JavaScript1.js"></script>
</body>
</html>


var styleTag = document.getElementById('my-style');
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

for (var i = 0; i < 1000; i++) {
    var bubble = document.createElement('div');
    var randomClass = 'x' + (Math.floor(Math.random() * 1000) + 1);
    bubble.className = ('bubble ' + randomClass);
    var randomSize = (Math.floor(Math.random() * 100) + 1) + 'px';
    bubble.style.width = randomSize;
    bubble.style.height = randomSize;
    bubble.style.left = (Math.floor(Math.random() * 1200) + 1) + 'px';
    bubble.style.backgroundColor = generateRandomColor();
    bubble.style.opacity = Math.random().toFixed(1);
    bubble.style.border = generateRandomBorder();
    randomVerticalSpeed = (Math.random() * 100).toFixed(1) + 2;
    randomHorizontalSpeed = (Math.random() * 100).toFixed(1) + 2;

    sheet.addRule(('.' + randomClass), '-webkit-animation: moveclouds ' + randomVerticalSpeed +'s linear infinite, sideWays ' + randomHorizontalSpeed +'s ease-in-out infinite alternate', 0);
    document.getElementById('bubbles').appendChild(bubble);

}

function generateRandomColor() {
    var r = Math.floor(Math.random() * 255) + 1;
    var g = Math.floor(Math.random() * 255) + 1;
    var b = Math.floor(Math.random() * 255) + 1;
    var rgb = 'rgb(' + r + ', ' + g + ',' + b + ')';
    return rgb;
}
function generateRandomBorder() {
    var width = (Math.floor(Math.random() * 3) + 1) + 'px solid ';
    return width + generateRandomColor();
}
setInterval(function () {
    var divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length - 1; i++) {
        divs[i].style.backgroundColor = generateRandomColor();
        divs[i].style.border = generateRandomBorder();
        var randomSize = (Math.floor(Math.random() * 100) + 1) + 'px';
        divs[i + 1].style.width = randomSize;
        divs[i + 1].style.height = randomSize;
    }
}, 200);