ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивая анимация для звездопада на CSS

Красивая анимация для звездопада на CSS

Красиво исполненный звездопад, который создан на чистом CSS, анимированные звездочки падают вниз на темном фоне, что интересно смотрится такой трюк. Это идет фоном, который можно закрепить на любой темный сайт, так как на светлом будет не очень впечатляет, где изначально под темный формат сделано.

Все выполнено на стилистике CSS, здесь нужно это подчеркнуть, так как основном такой вид идет совершенно в другом формате, где этот идет в самом простом виде, где графика аналогична другим. При входе на сайт, пользователь или гость будет удивлен таким образом, так как звезды выполнены ярко и еще оставляют свой след, который со временем исчезает.

Обычно под такую функцию анимации применяют CSS3, что есть идея закрепить на отдельной страницы, которая будет тематически оформлена. Также не забываем, чтобы все смотрелось корректно, то желательно просматривать на обновленных версиях браузера.

Приступаем к установке:

HTML

Код

CSS

Код

.dentanud-ktulemund {
position: relative;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}

.semasvdus-pagepates {
position: absolute;
left: 50%;
top: 50%;
height: 2px;
background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
border-radius: 999px;
-webkit-filter: drop-shadow(0 0 6px #699bff);
filter: drop-shadow(0 0 6px #699bff);
-webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}
.semasvdus-pagepates::before, .semasvdus-pagepates::after {
content: '';
position: absolute;
top: calc(50% - 1px);
right: 0;
height: 2px;
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
-webkit-transform: translateX(50%) rotateZ(45deg);
transform: translateX(50%) rotateZ(45deg);
border-radius: 100%;
-webkit-animation: shining 3000ms ease-in-out infinite;
animation: shining 3000ms ease-in-out infinite;
}
.semasvdus-pagepates::after {
-webkit-transform: translateX(50%) rotateZ(-45deg);
transform: translateX(50%) rotateZ(-45deg);
}
.semasvdus-pagepates:nth-child(1) {
top: calc(50% - -13px);
left: calc(50% - 131px);
-webkit-animation-delay: 5146ms;
animation-delay: 5146ms;
}
.semasvdus-pagepates:nth-child(1)::before, .semasvdus-pagepates:nth-child(1)::after, .semasvdus-pagepates:nth-child(1)::after {
-webkit-animation-delay: 5146ms;
animation-delay: 5146ms;
}
.semasvdus-pagepates:nth-child(2) {
top: calc(50% - -130px);
left: calc(50% - 247px);
-webkit-animation-delay: 1101ms;
animation-delay: 1101ms;
}
.semasvdus-pagepates:nth-child(2)::before, .semasvdus-pagepates:nth-child(2)::after, .semasvdus-pagepates:nth-child(2)::after {
-webkit-animation-delay: 1101ms;
animation-delay: 1101ms;
}
.semasvdus-pagepates:nth-child(3) {
top: calc(50% - 189px);
left: calc(50% - 25px);
-webkit-animation-delay: 2253ms;
animation-delay: 2253ms;
}
.semasvdus-pagepates:nth-child(3)::before, .semasvdus-pagepates:nth-child(3)::after, .semasvdus-pagepates:nth-child(3)::after {
-webkit-animation-delay: 2253ms;
animation-delay: 2253ms;
}
.semasvdus-pagepates:nth-child(4) {
top: calc(50% - -161px);
left: calc(50% - 23px);
-webkit-animation-delay: 3160ms;
animation-delay: 3160ms;
}
.semasvdus-pagepates:nth-child(4)::before, .semasvdus-pagepates:nth-child(4)::after, .semasvdus-pagepates:nth-child(4)::after {
-webkit-animation-delay: 3160ms;
animation-delay: 3160ms;
}
.semasvdus-pagepates:nth-child(5) {
top: calc(50% - 159px);
left: calc(50% - 282px);
-webkit-animation-delay: 8477ms;
animation-delay: 8477ms;
}
.semasvdus-pagepates:nth-child(5)::before, .semasvdus-pagepates:nth-child(5)::after, .semasvdus-pagepates:nth-child(5)::after {
-webkit-animation-delay: 8477ms;
animation-delay: 8477ms;
}
.semasvdus-pagepates:nth-child(6) {
top: calc(50% - -153px);
left: calc(50% - 48px);
-webkit-animation-delay: 9146ms;
animation-delay: 9146ms;
}
.semasvdus-pagepates:nth-child(6)::before, .semasvdus-pagepates:nth-child(6)::after, .semasvdus-pagepates:nth-child(6)::after {
-webkit-animation-delay: 9146ms;
animation-delay: 9146ms;
}
.semasvdus-pagepates:nth-child(7) {
top: calc(50% - -26px);
left: calc(50% - 221px);
-webkit-animation-delay: 981ms;
animation-delay: 981ms;
}
.semasvdus-pagepates:nth-child(7)::before, .semasvdus-pagepates:nth-child(7)::after, .semasvdus-pagepates:nth-child(7)::after {
-webkit-animation-delay: 981ms;
animation-delay: 981ms;
}
.semasvdus-pagepates:nth-child(8) {
top: calc(50% - -168px);
left: calc(50% - 47px);
-webkit-animation-delay: 8735ms;
animation-delay: 8735ms;
}
.semasvdus-pagepates:nth-child(8)::before, .semasvdus-pagepates:nth-child(8)::after, .semasvdus-pagepates:nth-child(8)::after {
-webkit-animation-delay: 8735ms;
animation-delay: 8735ms;
}
.semasvdus-pagepates:nth-child(9) {
top: calc(50% - -29px);
left: calc(50% - 76px);
-webkit-animation-delay: 728ms;
animation-delay: 728ms;
}
.semasvdus-pagepates:nth-child(9)::before, .semasvdus-pagepates:nth-child(9)::after, .semasvdus-pagepates:nth-child(9)::after {
-webkit-animation-delay: 728ms;
animation-delay: 728ms;
}
.semasvdus-pagepates:nth-child(10) {
top: calc(50% - -180px);
left: calc(50% - 73px);
-webkit-animation-delay: 7226ms;
animation-delay: 7226ms;
}
.semasvdus-pagepates:nth-child(10)::before, .semasvdus-pagepates:nth-child(10)::after, .semasvdus-pagepates:nth-child(10)::after {
-webkit-animation-delay: 7226ms;
animation-delay: 7226ms;
}
.semasvdus-pagepates:nth-child(11) {
top: calc(50% - -138px);
left: calc(50% - 131px);
-webkit-animation-delay: 9896ms;
animation-delay: 9896ms;
}
.semasvdus-pagepates:nth-child(11)::before, .semasvdus-pagepates:nth-child(11)::after, .semasvdus-pagepates:nth-child(11)::after {
-webkit-animation-delay: 9896ms;
animation-delay: 9896ms;
}
.semasvdus-pagepates:nth-child(12) {
top: calc(50% - -112px);
left: calc(50% - 87px);
-webkit-animation-delay: 2346ms;
animation-delay: 2346ms;
}
.semasvdus-pagepates:nth-child(12)::before, .semasvdus-pagepates:nth-child(12)::after, .semasvdus-pagepates:nth-child(12)::after {
-webkit-animation-delay: 2346ms;
animation-delay: 2346ms;
}
.semasvdus-pagepates:nth-child(13) {
top: calc(50% - 130px);
left: calc(50% - 66px);
-webkit-animation-delay: 5796ms;
animation-delay: 5796ms;
}
.semasvdus-pagepates:nth-child(13)::before, .semasvdus-pagepates:nth-child(13)::after, .semasvdus-pagepates:nth-child(13)::after {
-webkit-animation-delay: 5796ms;
animation-delay: 5796ms;
}
.semasvdus-pagepates:nth-child(14) {
top: calc(50% - 100px);
left: calc(50% - 110px);
-webkit-animation-delay: 2021ms;
animation-delay: 2021ms;
}
.semasvdus-pagepates:nth-child(14)::before, .semasvdus-pagepates:nth-child(14)::after, .semasvdus-pagepates:nth-child(14)::after {
-webkit-animation-delay: 2021ms;
animation-delay: 2021ms;
}
.semasvdus-pagepates:nth-child(15) {
top: calc(50% - 132px);
left: calc(50% - 209px);
-webkit-animation-delay: 1605ms;
animation-delay: 1605ms;
}
.semasvdus-pagepates:nth-child(15)::before, .semasvdus-pagepates:nth-child(15)::after, .semasvdus-pagepates:nth-child(15)::after {
-webkit-animation-delay: 1605ms;
animation-delay: 1605ms;
}
.semasvdus-pagepates:nth-child(16) {
top: calc(50% - 105px);
left: calc(50% - 88px);
-webkit-animation-delay: 5640ms;
animation-delay: 5640ms;
}
.semasvdus-pagepates:nth-child(16)::before, .semasvdus-pagepates:nth-child(16)::after, .semasvdus-pagepates:nth-child(16)::after {
-webkit-animation-delay: 5640ms;
animation-delay: 5640ms;
}
.semasvdus-pagepates:nth-child(17) {
top: calc(50% - -20px);
left: calc(50% - 80px);
-webkit-animation-delay: 5547ms;
animation-delay: 5547ms;
}
.semasvdus-pagepates:nth-child(17)::before, .semasvdus-pagepates:nth-child(17)::after, .semasvdus-pagepates:nth-child(17)::after {
-webkit-animation-delay: 5547ms;
animation-delay: 5547ms;
}
.semasvdus-pagepates:nth-child(18) {
top: calc(50% - -61px);
left: calc(50% - 67px);
-webkit-animation-delay: 798ms;
animation-delay: 798ms;
}
.semasvdus-pagepates:nth-child(18)::before, .semasvdus-pagepates:nth-child(18)::after, .semasvdus-pagepates:nth-child(18)::after {
-webkit-animation-delay: 798ms;
animation-delay: 798ms;
}
.semasvdus-pagepates:nth-child(19) {
top: calc(50% - -186px);
left: calc(50% - 211px);
-webkit-animation-delay: 8854ms;
animation-delay: 8854ms;
}
.semasvdus-pagepates:nth-child(19)::before, .semasvdus-pagepates:nth-child(19)::after, .semasvdus-pagepates:nth-child(19)::after {
-webkit-animation-delay: 8854ms;
animation-delay: 8854ms;
}
.semasvdus-pagepates:nth-child(20) {
top: calc(50% - 148px);
left: calc(50% - 132px);
-webkit-animation-delay: 2796ms;
animation-delay: 2796ms;
}
.semasvdus-pagepates:nth-child(20)::before, .semasvdus-pagepates:nth-child(20)::after, .semasvdus-pagepates:nth-child(20)::after {
-webkit-animation-delay: 2796ms;
animation-delay: 2796ms;
}

@-webkit-keyframes tail {
0% {
width: 0;
}
30% {
width: 100px;
}
100% {
width: 0;
}
}

@keyframes tail {
0% {
width: 0;
}
30% {
width: 100px;
}
100% {
width: 0;
}
}
@-webkit-keyframes shining {
0% {
width: 0;
}
50% {
width: 30px;
}
100% {
width: 0;
}
}
@keyframes shining {
0% {
width: 0;
}
50% {
width: 30px;
}
100% {
width: 0;
}
}
@-webkit-keyframes shooting {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
}
@keyframes shooting {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
}
@-webkit-keyframes sky {
0% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
100% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}
@keyframes sky {
0% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
100% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}

Если для кого покажется стилистика CSS велика, то можете разместить ее файле, что с последствием вывода, как по всем страницам, так и по отдельным, там где хотите видеть такую картину. Но не нужно забывать, то это фон, где также по вверх его устанавливается каркас или нужный функционал.

Источник: imapo.ru

Демонстрация

08 Декабря 2018 Загрузок: 1 Просмотров: 2103 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0