В верхнюю часть сайта в самый верх:

Код

 

<style>/* гирлянда */

.garland {

position: fixed;

top: 0;

left: 0;

width: 100%;

display: flex;

justify-content: space-around;

padding: 15px 0;

list-style: none;

z-index: 9999;

}



/* лампочки */

.garland li {

width: 14px;

height: 18px;

border-radius: 50% 50% 45% 45%;

background: red;

position: relative;

animation: blink 1.5s infinite ease-in-out;

box-shadow: 0 0 10px currentColor;

}



/* “провод” */

.garland li::before {

content: "";

position: absolute;

top: -10px;

left: 50%;

width: 2px;

height: 10px;

background: #444;

transform: translateX(-50%);

}



/* разные цвета */

.garland li:nth-child(2n) { background: #00ffcc; color: #00ffcc; animation-delay: .2s; }

.garland li:nth-child(3n) { background: #ffcc00; color: #ffcc00; animation-delay: .4s; }

.garland li:nth-child(4n) { background: #ff4d6d; color: #ff4d6d; animation-delay: .6s; }

.garland li:nth-child(5n) { background: #7c4dff; color: #7c4dff; animation-delay: .8s; }



/* мигание */

@keyframes blink {

0%, 100% {

opacity: 0.3;

transform: translateY(0) scale(1);

filter: brightness(0.8);

}

50% {

opacity: 1;

transform: translateY(2px) scale(1.1);

filter: brightness(1.5);

}

}

</style>

<ul class="garland">

<li></li><li></li><li></li><li></li><li></li>

<li></li><li></li><li></li><li></li><li></li>

</ul>