Adding Flashing Christmas Lights to your header
Chistmas Lights
<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>
<style>
.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: #2bd232; box-shadow: 0px 4.6666666667px 24px 3px #2bd232; webkit-animation-name: flash-1; animation-name: flash-1; webkit-animation-duration: 2s; animation-duration: 2s; }
.lightrope li:nth-child(2n + 1) { background: #40aecf; box-shadow: 0px 4.6666666667px 24px 3px rgba(64, 174, 207, 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: #8e0717; box-shadow: 0px 4.6666666667px 24px 3px #8e0717; 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.3333333333px; border-radius: 3px; top: -4.6666666667px; left: 1px; }
.lightrope li:after { content: ""; top: -14px; left: 9px; position: absolute; width: 52px; height: 18.6666666667px; 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: #2bd232; box-shadow: 0px 4.6666666667px 24px 3px #2bd232; }
50% { background: rgba(43, 210, 50, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(43, 210, 50, 0.2); }
}
@keyframes flash-1 {
0%, 100% { background: #2bd232; box-shadow: 0px 4.6666666667px 24px 3px #2bd232; }
50% { background: rgba(43, 210, 50, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(43, 210, 50, 0.2); }
}
@-webkit-keyframes flash-2 {
0%, 100% { background: #40aecf; box-shadow: 0px 4.6666666667px 24px 3px #40aecf; }
50% { background: rgba(64, 174, 207, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(64, 174, 207, 0.2); }
}
@keyframes flash-2 {
0%, 100% { background: #40aecf; box-shadow: 0px 4.6666666667px 24px 3px #40aecf; }
50% { background: rgba(64, 174, 207, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(64, 174, 207, 0.2); }
}
@-webkit-keyframes flash-3 {
0%, 100% { background: #8e0717; box-shadow: 0px 4.6666666667px 24px 3px #8e0717; }
50% { background: rgba(142, 7, 23, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(142, 7, 23, 0.2); }
}
@keyframes flash-3 {
0%, 100% { background: #8e0717; box-shadow: 0px 4.6666666667px 24px 3px #8e0717; }
50% { background: rgba(142, 7, 23, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(142, 7, 23, 0.2); }
}
</style>