Показать сообщение отдельно
  #9 (permalink)  
Старый 30.12.2017, 18:15
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

рони,
круто

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>

Последний раз редактировалось void(), 30.12.2017 в 19:04.
Ответить с цитированием