рони,
круто
laimas,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>С НГ</title>
</head>
<body>
<script>
window.addEventListener("DOMContentLoaded", function() {
var a = document.querySelectorAll(".lamp"), b = "#ff0000 #006cff #02fa0c #ff04d5 #ffff00 #ffd700".split(" ");
(function e() {
var c = b[Math.random() * b.length | 0], f = .3 < Math.random(), d = a[Math.random() * a.length | 0].style;
d.backgroundColor = c;
d.boxShadow = f ? "0px 0px 15px 0px " + c : "";
window.setTimeout(e, 20);
})();
});
</script>
<h1>С Новым Годом! :) <br> 2❄18 </h1>
<div class="background wrapper"></div>
<div class="wrapper">
<div id="star"> ★</div>
<div class="lamps lamps1">
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
</div>
<div class="lamps lamps2">
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
</div>
<div class="lamps lamps3">
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>
</div>
<div id="triangle-up"></div>
<div class="conteiner">
<div class="round"></div>
</div>
</div>
<style>
body{
background-color: #333;
text-align: center;
}
.wrapper{
width: 300px;
margin: 10px auto;
text-align: center;
position: absolute;
left: 50%;
top:100px;
margin-left:-160px;
}
#triangle-up {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 300px solid GREEN;
}
.conteiner{
overflow: hidden;
}
#star{
font-size: 50px;
color: red;
display: inline-block;
}
.background {
width: 400px;
height: 500px;
background-color: #444;
border-radius: 50%;
box-shadow: 0 0 150px 150px #444;
top:50px;
}
.round{
width: 300px;
height: 120px;
border-radius: 50%;
background-color: green;
margin-top:-60px;
}
h1{
z-index: 999;
position: relative;
color: gold;
}
.lamp{
width:15px;
height:15px;
float:left;
margin:10px;
border-radius:25px 8px;
transition:all .3s ease-in;
box-shadow:0px 0px 8px 0px rgba(255, 255, 255, 1);
}
.lamps {
z-index: 999;
width: 50px;
position: absolute;
margin-left: 60px;
margin-top: 0px;
}
.lamps1 {
transform: rotate(26deg);
z-index: 999;
margin-left: 65px;
margin-top: 0px;
}
.lamps2 {
margin-left: 130px;
margin-top: 30px;
}
.lamps3 {
transform: rotate(-27deg);
margin-left: 200px;
margin-top: -10px;
}
</style>
</body>
</html>