Анимированные новогодние гирлянды на 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

4 лет назад

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

Ответить

SPORT TV

@Apocalypse, привет, помощь нужна - на связи kinouser

2022-05-01 08:20:22

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

Добавлен новый комментарий от пользователя SPORT TV: «Привет Апо, перестал данный скрипт хорошо работать, после имени цитируемого подставляется пара скобочек. Может глянешь что с ним не так, спасибо

Это kinouser)» в материале Цитирование всего комментария by Apocalypse для uCoz

2022-05-02 14:19:56

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

Добавлен новый комментарий от пользователя Apocalypse: «Как выяснилось, проблема на стороне козы» в материале Цитирование всего комментария by Apocalypse для uCoz

2022-05-04 19:37:44

XemorDio

Живой сайт смотрю ещё

2022-05-11 09:58:27

Apocalypse

@XemorDio, ну... только в глубокой спячке

2022-05-15 12:54:49

iadarch

Всем добрый день! Не могли бы кое с чем помочь? Нашла здесь нудный эффект для сайта "летающие светлячки", на интересующий меня вопрос так и не ответили, поэтому решила спросить здесь. Можно ли сделать так, чтобы данный эффект вставлялся никак отдельный контейнер, а поверх изображения/контейнера с фоновым изображением? Простите, я новичок, разбираюсь потихоньку во всем. Оставляю ссылку на статью https://imapo.ru/летающие-светлячки-на-html5-canvas/#comment-22229

2022-05-26 15:42:31

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

Добавлен новый комментарий от пользователя iadarch: «Добрый день! А если нужно вставить "светлячков" поверх хедера с фоновым изображением? Как поступить тогда? Сколько не пыталась сделать, но ничего не выходит, вставляется на сером фоне после контейнера » в материале Летающие светлячки на HTML5 Canvas

2022-06-14 10:06:29

Apocalypse

Домен продлён ещё на год. Живём, господа 😎

2022-06-21 19:48:16

Apocalypse

Если честно, то это был целый квест после того, как наложили санкции. Я просто не мог оплатить домен два месяца тупо потому, что Мастер Кард не работал между нашими странами и рублёвые платежи отклонялись

2022-06-21 19:49:56

Al-Sher

@Apocalypse, Ну хотя бы в одну сторону есть еще возможности проводить платежи 👻

2022-06-22 13:39:34

......

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

Анимированные новогодние гирлянды на 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

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

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

Новогодние еловые веточки в уголках экрана

Галерея изображений с 3D эффектом на CSS3

Пузырьки от курсора на HTML5 Canvas

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

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