:dance:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color:#333;
}
.lamp{
display: inline-block;
width:15px;
height:15px;
margin:10px;
border-radius:25px 8px;
transition:all 180ms ease-in;
box-shadow:0px 0px 8px 0px rgba(255, 255, 255, 1);
background-color: transparent;
transform: scale(1);
}
.wrapper{
width:640px;
margin:0 auto;
color:gold;
text-align:center;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
function h(e) {
e && "background-color" == e.propertyName && (b[a].style.transform = "",
(a = ++a % b.length) && a % c || (d = f(), c += ++g, !a && (c = g = 1)),
b[a].style.backgroundColor = d,
b[a].style.transform = "scale(1.5)");
}
function f() {
return "#" + ("000000" + (16777215 * Math.random() | 0).toString(16)).slice(-6);
}
var b = document.querySelectorAll(".lamp"), d = f(), a = 0, c = 1, g = 1;
[].forEach.call(b, function(a, b) {
a.addEventListener("transitionend", h, !1);
});
window.setTimeout(function() {
b[a].style.backgroundColor = d;
}, 50);
});
</script>
</head>
<body>
<div class="wrapper">
<h1>С Новым Годом! :)</h1>
<span class="lamp"></span><br>
<span class="lamp"></span>
<span class="lamp"></span><br>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span><br>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span><br>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span><br>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span><br>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span><br>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span><br>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span><br>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span><br>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
<span class="lamp"></span>
</div>
</body>
</html>
|