Анимированная новогодняя гирлянда в шапке Gridbox

/* Общий фиксированный контейнер нити гирлянды */.lightrope { text-align: center; white-space: nowrap; overflow: hidden; position: absolute; z-index: 10000; margin: -15px 0 0 0; padding: 0; pointer-events: none; width: 100%; top: 0; left: 0; list-style: none;}/* Базовые свойства лампочки */.lightrope li { position: relative; animation-fill-mode: both; animation-iteration-count: infinite; list-style: none; margin: 0; padding: 0; display: inline-block; width: 12px; height: 28px; border-radius: 50%; margin: 20px; background: #00f7a5; box-shadow: 0px 4px 24px 3px #00f7a5; animation-name: flash-1; animation-duration: 2s;}/* Крепление лампочки к проводу */.lightrope li:before { content: ""; position: absolute; background: #222222; width: 10px; height: 9px; border-radius: 3px; top: -4px; left: 1px;}/* Провисающий провод между лампами */.lightrope li:after { content: ""; top: -14px; left: 9px; position: absolute; width: 52px; height: 18px; border-bottom: solid #222222 2px; border-radius: 50%;}.lightrope li:last-child:after { content: none;}/* Цветовые группы мерцания */.lightrope li:nth-child(2n+1) { background: #00ddf7; box-shadow: 0px 4px 24px 3px rgba(0, 221, 247, 0.7); animation-name: flash-2; animation-duration: 0.8s;}.lightrope li:nth-child(4n+2) { background: #f70094; box-shadow: 0px 4px 24px 3px #f70094; animation-name: flash-3; animation-duration: 1.4s;}.lightrope li:nth-child(odd) { animation-duration: 1.8s;}.lightrope li:nth-child(3n+1) { animation-duration: 2.3s;}/* Анимации яркости и свечения */@keyframes flash-1 { 0%, 100% { background: #00f7a5; box-shadow: 0px 4px 24px 3px #00f7a5; } 50% { background: rgba(0, 247, 165, 0.4); box-shadow: 0px 4px 24px 3px rgba(0, 247, 165, 0.2); }}@keyframes flash-2 { 0%, 100% { background: #00ddf7; box-shadow: 0px 4px 24px 3px #00ddf7; } 50% { background: rgba(0, 221, 247, 0.4); box-shadow: 0px 4px 24px 3px rgba(0, 221, 247, 0.2); }}@keyframes flash-3 { 0%, 100% { background: #f70094; box-shadow: 0px 4px 24px 3px #f70094; } 50% { background: rgba(247, 0, 148, 0.4); box-shadow: 0px 4px 24px 3px rgba(247, 0, 148, 0.2); }}

document.addEventListener('DOMContentLoaded', () => { // Проверяем, не была ли гирлянда уже создана if (document.querySelector('.lightrope')) return; const lightrope = document.createElement('ul'); lightrope.className = 'lightrope'; // Рассчитываем количество ламп с запасом под ширину экрана const count = Math.ceil(window.innerWidth / 50) + 4; for (let i = 0; i < count; i++) { const li = document.createElement('li'); lightrope.appendChild(li); } // Вставляем гирлянду в самый верх страницы document.body.prepend(lightrope);});