Звёздный дождь

Очень лёгкий код, только html и css, поэтому вставить его можно куда угодно, хоть в CMS, написанную на php, хоть в простую html страницу.

Количество и размер звёздочек можно увеличить по желанию,о чём есть комментарии в коде.


HTML

 <div class="space">
		<div class="stars1"></div>
		<div class="stars2"></div>
		<div class="stars3"></div>
		<div class="stars4"></div>
		<div class="stars5"></div>
		<div class="stars6"></div>
		<div class="stars7"></div>
		<div class="stars8"></div>
		<div class="stars9"></div>
		<div class="stars10"></div>
 </div> 

CSS

.space {
	width: 600px;
	height: 300px;
/* Фон - картинка фрагмента звёздного неба
которая по умолчанию размножилась на весь блок */
	background-image: url(images/120.jpg);
	position: relative;	
}
/*Делаем 10 звёздочек, часть из которых будет
мигать, а часть падать*/ .stars1, .stars2, .stars3, .stars4, .stars5, .stars6, .stars7, .stars8, .stars9, .stars10 { position: absolute; border-radius: 50%/50%; background-image: -webkit-radial-gradient(white, black); width: 3px; /*размер звёздочек, можно увеличить*/ height: 3px; } /*Позиционируем все звёздочки на разном расстоянии
от краёв блока и задаём им анимацию меняющую их положение
или прозрачность*/ .stars1 { top: 8%; left: 3%; animation: stars1 4s 3s linear infinite; } .stars2 { top: 3%; left: 10%; animation: stars2 2s linear infinite; } .stars3 { top: 15%; left: 25%; animation: stars3 5s 1s linear infinite; } .stars4 { top: 12%; left: 35%; animation: stars4 6s 2s linear infinite; } .stars5 { top: 23%; left: 47%; animation: stars5 2.5s 1s linear infinite; } .stars6 { top: 11%; left: 60%; animation: stars6 7s linear infinite; } .stars7 { top: 20%; left: 70%; animation: stars7 2s 1s linear infinite; } .stars8 { top: 12%; left: 80%; animation: stars8 4s linear infinite; } .stars9 { top: 30%; left: 90%; animation: stars9 3s 2s linear infinite; } .stars10 { top: 7%; left: 98%; animation: stars10 6s linear infinite; } /*Четыре звёздочки делаем мигающими, задав им переход
от полной прозрачности к полной непрозрачности*/ @keyframes stars2 { 0% { opacity: 1; } 100%{ opacity: 0; } } @keyframes stars5 { 0% { opacity: 1; } 100%{ opacity: 0; } } @keyframes stars7 { 0% { opacity: 1; } 100%{ opacity: 0; } } @keyframes stars9 { 0% { opacity: 1; } 100%{ opacity: 0; } } /*Остальные делаем падающими задав им перемещение
и изменение размера*/ @keyframes stars1 { 0% { width: 1px; /*Размер звёздочки в начале падения*/ } 7% { width: 6px; /*Размер в процессе падения*/ opacity: 1; transform: translate(150px, 150px); } 8% { opacity: 0; } 100% { opacity: 0; } } @keyframes stars3 { 0% { width: 3px; } 12% { width: 10px; opacity: 1; transform: translate(-200px, 200px); } 13% { opacity: 0; } 100% { opacity: 0; } } @keyframes stars4 { 0% { width: 3px; } 10% { width: 10px; opacity: 1; transform: translate(200px, 300px); } 11% { opacity: 0; } 100% { opacity: 0; } } @keyframes stars6 { 0% { width: 3px; } 10% { width: 10px; opacity: 1; transform: translate(-400px, 300px); } 11% { opacity: 0; } 100% { opacity: 0; } } @keyframes stars8 { 0% { width: 3px; } 10% { width: 10px; opacity: 1; transform: translate(-300px, 300px); } 11% { opacity: 0; } 100% { opacity: 0; } } @keyframes stars10 { 0% { width: 3px; } 10% { width: 10px; opacity: 1; transform: translate(-600px, 200px); } 11% { opacity: 0; } 100% { opacity: 0; } }

Желаю творческих успехов.

Запись опубликована в рубрике Новости. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *