<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>С НГ</title>
</head>
<body>
<div class="wrapper">
<div class="lamp active1"></div><div class="lamp active2"></div><div class="lamp active3"></div><div class="lamp active4"></div><div class="lamp active5"></div><div class="lamp active6"></div><div class="lamp active1"></div><div class="lamp active2"></div><div class="lamp active3"></div><div class="lamp active4"></div><div class="lamp active5"></div><div class="lamp active6"></div><div class="lamp active1"></div><div class="lamp active2"></div><div class="lamp active3"></div><div class="lamp active4"></div><div class="lamp active5"></div><div class="lamp active5"></div>
<h1>С Новым Годом! :)</h1>
</div>
<script>
window.onload = function(){
var items = document.querySelectorAll('.lamp');
function active(){
var x = mtRand(1, 7);
this.classList.remove("active1", "active2", "active3", "active4", "active5", "active6");
this.classList.toggle('active' + x);
}
setInterval(function(){
var rand = mtRand(0, items.length - 1);
active.call(items[rand]);
}, 15);
}
function mtRand(min, max){
return Math.floor(Math.random() * (max - min +1));
}
</script>
<style>
body{background:#333}
.wrapper{width:640px; margin: 0 auto; color: gold; text-align: center;}
.lamp{width:15px; height:15px; float:left; margin:10px; border-radius:25px 8px; background:#8bc34a}
.active1{background:#ff0000; box-shadow:0px 0px 19px 0px rgba(255,0,0,1)}
.active2{background:yellow; box-shadow:0px 0px 19px 0px rgba(255,200,0,1)}
.active3{background:#006cff; box-shadow:0px 0px 9px 0px rgba(0,160,255,1)}
.active4{background:#02fa0c; box-shadow:0px 0px 19px 0px rgba(50,255,0,1)}
.active5{background:gold; box-shadow:0px 0px 19px 0px rgba(255,130,0,1)}
.active6{background:#ff04d5; box-shadow:0px 0px 19px 0px rgba(250,50 250,1)}
</style>
</body>
</html>