Активный
- Тема Автор
- #1
Шаблоны - PAGE_CONTAINER - находим тег <head> и после него добавляем этот код
HTML:
<div class="christmasLights"></div>Далее переходим шаблоны - Extra Less и добавляем этот код в самом внизу
CSS:
.christmasLights {
position: relative;
width: 100%;
height: 30px;
background: #1a1a1a;
overflow: hidden;
z-index: 1000;
}
.christmasLights::before {
content: '';
position: absolute;
top: 50%;
left: -10%;
width: 120%;
height: 10px;
background-image:
radial-gradient(circle at 10px 5px, #ff0000 7px, transparent 8px),
radial-gradient(circle at 30px 5px, #00ff00 7px, transparent 8px),
radial-gradient(circle at 50px 5px, #0000ff 7px, transparent 8px),
radial-gradient(circle at 70px 5px, #ffff00 7px, transparent 8px);
background-size: 40px 10px;
background-repeat: repeat-x;
animation: moveLights 4s linear infinite;
}
.p-pageWrapper {
padding-top: 30px;
}
@keyframes moveLights {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-40px);
}
}
Активный
- Тема Автор
- #2
Для адаптации на моб тел добавьте внизу в шаблоне Extra Less код
CSS:
@media (max-width: 650px) { Настройте сами по PX
.header::before, .header::after, .christmasLights {
display: none;
}
.p-pageWrapper {
padding-top: 0 !important;
}
}