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

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

Ответить

Exact matches only

Search in title

Search in content

Search in excerpt

Hidden

Apocalypse

"Думал, что пишу девушке одно, а написал, что лошадь мной попользовалась и бросила. Она долго не могла унять свой смех" 😆 😆 😆

2022-01-10 15:44:28

Apocalypse

@m1haluc4, да ничего особо. Думал, будет война, но пронесло. Остальные мысли на этом фоне кажутся менее важными

2022-01-10 15:45:15

m1haluc4

Да, это дело такое. Надеюсь, все устаканится и будет хорошо

2022-01-10 16:12:45

Apocalypse

@m1haluc4, надеюсь на это

2022-01-10 17:27:42

Dased

Здравствуйте, почему в комплекте нет оригинальных иконок, что идут с меню
https://imapo.ru/%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B5-%D0%B2%D0%B5%D1%80%D1%82%D0%B8%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5-%D0%BC%D0%B5%D0%BD%D1%8E-css3/

2022-01-13 15:33:28

Apocalypse

@Dased, привет. Потому что там используются не обычные иконки, а шрифт иконок

2022-01-13 15:41:56

Dased

а как можно их добавить?

2022-01-13 15:54:15

Apocalypse

@Dased, они подключаются CSS файлом. В инструкции по установки всё есть. Там между тегами и вставляется шрифт FontAwesome. Он и отвечает за иконки

2022-01-14 21:21:29

Apocalypse

@Dased, а вообще, если к какому-то материалу есть вопросы, то лучше оставлять их в комментариях. Здесь в чате ответы затеряются, а там они могут быть полезны другим пользователям

2022-01-14 21:22:30

Ярослав Светлый

Добавлена возможность авторизовываться и регистрироваться на сайте через facebook

2022-01-17 12:33:30

......

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

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

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

Красивые эффекты на кнопках при наведении с использованием CSS3 и SVG

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

3D обложка с Parallax эффектом на jQuery

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

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