Анимированные новогодние гирлянды на CSS3

Разместил: Apocalypse
Опубликовано: 2 ноября 2017

Классная анимированная новогодняя гирлянда, которая выполнена на чистом CSS Для начала посмотрите ДЕМО Установка: 1#: В самый низ вашего CSS вставьте:

.lightrope {
text-align: center;
white-space: nowrap;
overflow: hidden;
position: absolute;
z-index: 1;
margin: -15px 0 0 0;
padding: 0;
pointer-events: none;
width: 100%;
}
.lightrope li {
position: relative;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
list-style: none;
margin: 0;
padding: 0;
display: block;
width: 12px;
height: 28px;
border-radius: 50%;
margin: 20px;
display: inline-block;
background: #00f7a5;
box-shadow: 0px 4.66667px 24px 3px #00f7a5;
-webkit-animation-name: flash-1;
animation-name: flash-1;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.lightrope li:nth-child(2n+1) {
background: cyan;
box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.5);
-webkit-animation-name: flash-2;
animation-name: flash-2;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
}
.lightrope li:nth-child(4n+2) {
background: #f70094;
box-shadow: 0px 4.66667px 24px 3px #f70094;
-webkit-animation-name: flash-3;
animation-name: flash-3;
-webkit-animation-duration: 1.1s;
animation-duration: 1.1s;
}
.lightrope li:nth-child(odd) {
-webkit-animation-duration: 1.8s;
animation-duration: 1.8s;
}
.lightrope li:nth-child(3n+1) {
-webkit-animation-duration: 1.4s;
animation-duration: 1.4s;
}
.lightrope li:before {
content: "";
position: absolute;
background: #222;
width: 10px;
height: 9.33333px;
border-radius: 3px;
top: -4.66667px;
left: 1px;
}
.lightrope li:after {
content: "";
top: -14px;
left: 9px;
position: absolute;
width: 52px;
height: 18.66667px;
border-bottom: solid #222 2px;
border-radius: 50%;
}
.lightrope li:last-child:after {
content: none;
}
.lightrope li:first-child {
margin-left: -40px;
}

@-webkit-keyframes flash-1 {
0%, 100% {
background: #00f7a5;
box-shadow: 0px 4.66667px 24px 3px #00f7a5;
}
50% {
background: rgba(0, 247, 165, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(0, 247, 165, 0.2);
}
}

@keyframes flash-1 {
0%, 100% {
background: #00f7a5;
box-shadow: 0px 4.66667px 24px 3px #00f7a5;
}
50% {
background: rgba(0, 247, 165, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(0, 247, 165, 0.2);
}
}
@-webkit-keyframes flash-2 {
0%, 100% {
background: cyan;
box-shadow: 0px 4.66667px 24px 3px cyan;
}
50% {
background: rgba(0, 255, 255, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2);
}
}
@keyframes flash-2 {
0%, 100% {
background: cyan;
box-shadow: 0px 4.66667px 24px 3px cyan;
}
50% {
background: rgba(0, 255, 255, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2);
}
}
@-webkit-keyframes flash-3 {
0%, 100% {
background: #f70094;
box-shadow: 0px 4.66667px 24px 3px #f70094;
}
50% {
background: rgba(247, 0, 148, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(247, 0, 148, 0.2);
}
}
@keyframes flash-3 {
0%, 100% {
background: #f70094;
box-shadow: 0px 4.66667px 24px 3px #f70094;
}
50% {
background: rgba(247, 0, 148, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(247, 0, 148, 0.2);
}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

.lightrope {

text-align: center;

white-space: nowrap;

overflow: hidden;

position: absolute;

z-index: 1;

margin: -15px 0 0 0;

padding: 0;

pointer-events: none;

width: 100%;

}

.lightrope li {

position: relative;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

list-style: none;

margin: 0;

padding: 0;

display: block;

width: 12px;

height: 28px;

border-radius: 50%;

margin: 20px;

display: inline-block;

background: #00f7a5;

box-shadow: 0px 4.66667px 24px 3px #00f7a5;

-webkit-animation-name: flash-1;

animation-name: flash-1;

-webkit-animation-duration: 2s;

animation-duration: 2s;

}

.lightrope li:nth-child(2n+1) {

background: cyan;

box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.5);

-webkit-animation-name: flash-2;

animation-name: flash-2;

-webkit-animation-duration: 0.4s;

animation-duration: 0.4s;

}

.lightrope li:nth-child(4n+2) {

background: #f70094;

box-shadow: 0px 4.66667px 24px 3px #f70094;

-webkit-animation-name: flash-3;

animation-name: flash-3;

-webkit-animation-duration: 1.1s;

animation-duration: 1.1s;

}

.lightrope li:nth-child(odd) {

-webkit-animation-duration: 1.8s;

animation-duration: 1.8s;

}

.lightrope li:nth-child(3n+1) {

-webkit-animation-duration: 1.4s;

animation-duration: 1.4s;

}

.lightrope li:before {

content: "";

position: absolute;

background: #222;

width: 10px;

height: 9.33333px;

border-radius: 3px;

top: -4.66667px;

left: 1px;

}

.lightrope li:after {

content: "";

top: -14px;

left: 9px;

position: absolute;

width: 52px;

height: 18.66667px;

border-bottom: solid #222 2px;

border-radius: 50%;

}

.lightrope li:last-child:after {

content: none;

}

.lightrope li:first-child {

margin-left: -40px;

}

@-webkit-keyframes flash-1 {

0%, 100% {

background: #00f7a5;

box-shadow: 0px 4.66667px 24px 3px #00f7a5;

}

50% {

background: rgba(0, 247, 165, 0.4);

box-shadow: 0px 4.66667px 24px 3px rgba(0, 247, 165, 0.2);

}

@keyframes flash-1 {

0%, 100% {

background: #00f7a5;

box-shadow: 0px 4.66667px 24px 3px #00f7a5;

}

50% {

background: rgba(0, 247, 165, 0.4);

box-shadow: 0px 4.66667px 24px 3px rgba(0, 247, 165, 0.2);

}

@-webkit-keyframes flash-2 {

0%, 100% {

background: cyan;

box-shadow: 0px 4.66667px 24px 3px cyan;

}

50% {

background: rgba(0, 255, 255, 0.4);

box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2);

}

@keyframes flash-2 {

0%, 100% {

background: cyan;

box-shadow: 0px 4.66667px 24px 3px cyan;

}

50% {

background: rgba(0, 255, 255, 0.4);

box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2);

}

@-webkit-keyframes flash-3 {

0%, 100% {

background: #f70094;

box-shadow: 0px 4.66667px 24px 3px #f70094;

}

50% {

background: rgba(247, 0, 148, 0.4);

box-shadow: 0px 4.66667px 24px 3px rgba(247, 0, 148, 0.2);

}

@keyframes flash-3 {

0%, 100% {

background: #f70094;

box-shadow: 0px 4.66667px 24px 3px #f70094;

}

50% {

background: rgba(247, 0, 148, 0.4);

box-shadow: 0px 4.66667px 24px 3px rgba(247, 0, 148, 0.2);

}

2#: Следующий код поместите в самый низ на нужных страницах перед тегом /body:

<ul class="lightrope">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

</ul>

Метки: CSS3 Гирлянда Зима Новый год Рождество Эффект

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Читайте также:

Вы точно не робот?

1 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

Гость

Skandar

5 лет назад

Простенько и красиво 🙂

Ответить

Apocalypse

@Al-Sher, тоже вроде норм

2022-11-12 10:54:22

Всевидящее око

Новый комментарий от пользователя fapalnaapo: «background: #000; не действивелен ( фон всегда черный» в материале Реалистичный метеорит на HTML5 Canvas

2022-11-15 15:33:22

Всевидящее око

Новый комментарий от пользователя Al-Sher: «Там еще в js указан фон #000. Можно указать rgba по идеи
ctx.fillStyle = '#000'; - сейчас
ctx.fillStyle = "rgba(255, 255, 255, 0)"; - можно сделать
» в материале Реалистичный метеорит на HTML5 Canvas

2022-11-15 23:09:59

stalker1313

@Apocalypse, в целом отвратительно, а так норм 😅

2022-11-26 17:45:49

Apocalypse

@stalker1313, это как?

2022-11-26 20:28:00

stalker1313

@Apocalypse, это именно вот сейчас вроде ничего, но в целом @опка) как-то так

2022-11-26 20:36:05

Apocalypse

@stalker1313, ты в этом не одинок, поверь мне 😁

2022-11-26 20:36:42

stalker1313

@Apocalypse, это да)

2022-11-26 21:22:52

Всевидящее око

Новый комментарий от пользователя Насаат: «Не работает ссылка на яндекс диск!!!» в материале Vysor 3.0.84 Pro Full - управление Android телефоном с компьютера на ОС Windows

2022-12-01 21:58:55

Всевидящее око

Новый комментарий от пользователя Apocalypse: «Залил к себе на хостинг: //imapo.ru/download/app.zip

Оригинальные ссылки в этой теме: https://4pda.to/forum/index.php?showtopic=775675&st=280» в материале Vysor 3.0.84 Pro Full - управление Android телефоном с компьютера на ОС Windows

2022-12-01 22:10:25

......

Для публикации сообщений в чате необходимо авторизоваться

Анимированные новогодние гирлянды на CSS3

Читайте также:

Посетители сайта

Панель управления

Декабрь 2022
Пн	Вт	Ср	Чт	Пт	Сб	Вс
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Анимированные новогодние гирлянды на CSS3

Читайте также:

Оригинальная страница ошибки 404 с анимированным тостером на HTML5 + CSS3 + jQuery

Вертикальное 3D меню на чистом CSS

Всплывающая подсказка к текстовому полю на CSS3 и jQuery

Посетители сайта

Панель управления