Code for blinking Christmas lights

0
(0)

Code for blinking Christmas lights

This code shows to make the pure CSS effect of blinking christmas lights which makes your project looks awesome.

PREVIEW for blinking Christmas lights

blinking Christmas lights

HTML CODE:

STEP-1

<ul class=”strand”>
<!– <li> tags create the individual christmas lights. we’re going to have 43 –>
<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>

PREVIEW FOR  STEP-1

blinking lights Preview 1

 

CSS CODE:

STEP-2:

body{
background: #1f253c;
}
.strand{
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%;
}

PREVIEW FOR STEP-2:

Blinking lights preview2

 

STEP 3:

.strand li{
position: relative;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-interation-count: infinite;
list-style: none;
margin: 0;
padding: 0;
display: block;
width: 12px;
height: 28px;
border-radius: 50%;
margin: 20px;
display: inline-block;
background:#f02241;
box-shadow: 0px 4.66667px 24px 3px #f02241;
-webkit-animation-name: flash-1;
animation-name: flash-1;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}

PREVIEW FOR STEP-3:

blinking lights preview 3

 

STEP 4:

.strand li:nth-child(2n+1){
background: #42b261;
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;
}

PREVIEW FOR STEP-4:

blinking lights preview 4

 

STEP 5:

.strand li:nth-child(4n+2){
background: #f9fbee;
box-shadow: 0px 4.66667px 24px 3px #f9fbee;
-webkit-animation-name: flash-3;
animation-name: flash-3;
-webkit-animation-duration: 1.1s;
animation-duration: 1.1s;
}

.strand li:nth-child(odd){
-webkit-animation-duration: 1.8s;
animation-duration: 1.8s;
}
.strand li:nth-child(3n+1){
-webkit-animation: 1.4s;
animation-duration: 1.4s;
}
.strand li:before{
content: “”;
position: absolute;
background: #222;
width: 10px;
height: 9.33333px;
border-radius: 3px;
top: -4.66667px;
left: 1px;
}
.strand li:after{
content: “”;
top: -14px;
left: 9px;
position: absolute;
width: 52px;
height: 18.66667px;
border-bottom: solid #222 2px;
border-radius: 50%;
}
.strand li:last-child:after{
content: none;
}
.strand li:first-child{
margin-left: 40px;
}

PREVIEW FOR STEP-5:

 

blinking lights preview 5

STEP 6:

@-webkit-keyframes flash-1{
0%, 100%{
background: #f02241;
box-shadow: 0px 4.66667px 24px 3px #f02241;
}
50%{
background: rgba(240, 34, 65, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(240, 35, 65, .02);
}
}
@keyframes flash-1{
0%,
100% {
background: #f02241;
box-shadow: 0px 4.66667px 24px 3px #f02241;
}
50% {
background: rgba(240, 34, 65, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(240, 35, 65, 0.2);
}
}

PREVIEW FOR STEP-6:

preview for step6

STEP 7

1@-webkit-keyframes flash-2{
0,
100%{
background: #42b261;
box-shadow: 0px 4.66667px 24px 3px #42b261;
}
50%{
background: rgba(66, 178, 97, 0.4);
box-shadow: 0px 4.6667px 24px 3px rgba(66, 178, 97, 0.2);
}
}
@keyframes flash-2{
0%,
100% {
background: #42b261;
box-shadow: 0px 4.66667px 24px 3px #42b261;
}
50% {
background: rgba(66, 178, 97, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(66, 178, 97, 0.2);
}
}
@-webkit-keyframes flash-3{
0%,
100%{
background: #f9fbee;
box-shadow: 0px 4.6667px 24px 3px #f9fbee;
}
50%{
background: rgba(249, 251, 238, .4);
box-shadow: 0px 4.66667px 24px 3px rgba(249, 251, 238, .2);
}
@keyframes flash-3{
0%,
100% {
background: #F9FBEE;
box-shadow: 0px 4.66667px 24px 3px #F9FBEE;
}
50% {
background: rgba(249, 251, 238, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(249, 251, 238, 0.2);
}
}
}

PREVIEW FOR STEP 7:

preview for step7

 

                         <<<<DOWNLOAD  FULL CODE>>>>

 

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Check Also

Top Lead Generation Strategies For Websites

0 (0) What is Lead Generation? As you all know a lead is a person …

Leave a Reply

Your email address will not be published. Required fields are marked *