Анимации елки с гирляндами (Модификация)

[AirDeveloper]

Шаблоны - PAGE_CONTAINER

И вставляем код:

<div class="christmas-tree-container">
    <h3>С Наступающим новым 2026 годом!</h3>
    <ul class="christmas-tree">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="tree-trunk"></div>
</div>

Далее заходим в Extra Less и вставляем код:

.christmas-tree-container {
    text-align: center;
    margin-bottom: 20px;
}

.christmas-tree {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    position: relative;
    display: inline-block;
}

.christmas-tree li {
    list-style: none;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 40px solid #2a6b2a;
    margin-bottom: -25px;
    position: relative;
}
.christmas-tree li::before {
    content: '';
    position: absolute;
    top: 10px;
    left: -20px;
    width: 40px;
    height: 10px;
    border-radius: 50%;
    animation: flicker 2s infinite alternate;
}
.christmas-tree li:nth-child(1)::before { background-color: #ff0000; animation-delay: 0s; }
.christmas-tree li:nth-child(2)::before { background-color: #ffff00; animation-delay: 0.5s; }
.christmas-tree li:nth-child(3)::before { background-color: #00ff00; animation-delay: 1s; }
.christmas-tree li:nth-child(4)::before { background-color: #0000ff; animation-delay: 1.5s; }
.christmas-tree li:nth-child(5)::before { background-color: #ff00ff; animation-delay: 2s; }

@keyframes flicker {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}
.tree-trunk {
    width: 20px;
    height: 30px;
    background-color: #8B4513;
    margin: -10px auto 0;
}