Home / CODING GEEK / Code for blinking Christmas lights

Code for blinking Christmas lights

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>>>>

 

About Smartz

Check Also

code for fancy search form

Code for fancy search form Here is step by step HTML and CSS example code for fancy …

Leave a Reply