<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- This is a *MASSIVE* CPU drain and just a bit of fun. I wouldn't use it on anything serious, but see it in action here: http://beeroclock.in --> <div class="bubbles"></div> <a class="bubble-toggle" href="#">Bubbles Off</a> <script> var $bubbles = $('.bubbles'); function bubbles() { // Settings var min_bubble_count = 20, // Minimum number of bubbles max_bubble_count = 60, // Maximum number of bubbles min_bubble_size = 3, // Smallest possible bubble diameter (px) max_bubble_size = 12; // Maximum bubble blur amount (px) // Calculate a random number of bubbles based on our min/max var bubbleCount = min_bubble_count + Math.floor(Math.random() * (max_bubble_count + 1)); // Create the bubbles for (var i = 0; i < bubbleCount; i++) { $bubbles.append('<div class="bubble-container"><div class="bubble"></div></div>'); } // Now randomise the various bubble elements $bubbles.find('.bubble-container').each(function(){ // Randomise the bubble positions (0 - 100%) var pos_rand = Math.floor(Math.random() * 101); // Randomise their size var size_rand = min_bubble_size + Math.floor(Math.random() * (max_bubble_size + 1)); // Randomise the time they start rising (0-15s) var delay_rand = Math.floor(Math.random() * 16); // Randomise their speed (3-8s) var speed_rand = 3 + Math.floor(Math.random() * 9); // Random blur var blur_rand = Math.floor(Math.random() * 3); // Cache the this selector var $this = $(this); // Apply the new styles $this.css({ 'left' : pos_rand + '%', '-webkit-animation-duration' : speed_rand + 's', '-moz-animation-duration' : speed_rand + 's', '-ms-animation-duration' : speed_rand + 's', 'animation-duration' : speed_rand + 's', '-webkit-animation-delay' : delay_rand + 's', '-moz-animation-delay' : delay_rand + 's', '-ms-animation-delay' : delay_rand + 's', 'animation-delay' : delay_rand + 's', '-webkit-filter' : 'blur(' + blur_rand + 'px)', '-moz-filter' : 'blur(' + blur_rand + 'px)', '-ms-filter' : 'blur(' + blur_rand + 'px)', 'filter' : 'blur(' + blur_rand + 'px)', }); $this.children('.bubble').css({ 'width' : size_rand + 'px', 'height' : size_rand + 'px' }); }); } // In case users value their laptop battery life // Allow them to turn the bubbles off $('.bubble-toggle').click(function(){ if($bubbles.is(':empty')) { bubbles(); $bubbles.show(); $(this).text('Bubbles Off'); } else { $bubbles.fadeOut(function(){ $(this).empty(); }); $(this).text('Bubbles On'); } return false; }); bubbles(); </script>

html, body { height: 100%; } body { background: #09f; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOTlmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1ZDFmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0099ff), color-stop(100%, #45d1ff)); background-image: -moz-linear-gradient(bottom, #0099ff, #45d1ff); background-image: -webkit-linear-gradient(bottom, #0099ff, #45d1ff); background-image: linear-gradient(to top, #0099ff, #45d1ff); } .bubble-toggle { position: absolute; top: 10px; right: 10px; padding: 10px; background: rgba(255, 255, 255, 0.5); font-family: sans-serif; font-size: 13px; color: #333; } .bubble-toggle:hover { background: rgba(255, 255, 255, 0.75); } .bubbles { position: relative; overflow: hidden; width: 100%; height: 100%; margin: 0 auto; } .bubble-container { position: absolute; bottom: 0; will-change: transform; -webkit-animation: bubblerise 4s infinite ease-in; -moz-animation: bubblerise 4s infinite ease-in; -ms-animation: bubblerise 4s infinite ease-in; animation: bubblerise 4s infinite ease-in; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .bubble { width: 6px; height: 6px; margin: 0 auto; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.25); will-change: transform; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -webkit-animation: bubblewobble 0.4s infinite linear; -moz-animation: bubblewobble 0.4s infinite linear; -ms-animation: bubblewobble 0.4s infinite linear; animation: bubblewobble 0.4s infinite linear; } @-webkit-keyframes bubblerise { 0% { bottom: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 5% { bottom: 0; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } 99% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } 100% { bottom: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } } @-moz-keyframes bubblerise { 0% { bottom: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 5% { bottom: 0; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } 99% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } 100% { bottom: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } } @-ms-keyframes bubblerise { 0% { bottom: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 5% { bottom: 0; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } 99% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } 100% { bottom: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } } @keyframes bubblerise { 0% { bottom: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 5% { bottom: 0; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } 99% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } 100% { bottom: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } } @-webkit-keyframes bubblewobble { 0% { margin-left: 0; } 50% { margin-left: 2px; } } @-moz-keyframes bubblewobble { 0% { margin-left: 0; } 50% { margin-left: 2px; } } @-ms-keyframes bubblewobble { 0% { margin-left: 0; } 50% { margin-left: 2px; } } @keyframes bubblewobble { 0% { margin-left: 0; } 50% { margin-left: 2px; } }