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
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
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:
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:
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:
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:
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:
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:
<<<<DOWNLOAD FULL CODE>>>>
