GameCMS Анимированный логотип для вашего сайта

[exe]

Добавьте современный и привлекательный акцент на ваш сайт с помощью анимированного логотипа!
Такой элемент не только делает дизайн более живым, но и привлекает внимание пользователей, повышая узнаваемость бренда.

Вы можете гибко настроить
Тип анимации — выберите стиль, который лучше всего подходит вашему проекту.
Цвета — настройте цветовую схему под ваш фирменный стиль.
Скорость анимации — управляйте динамикой отображения.
Размер и позиционирование — подгоните под структуру вашего шаблона.

Анимированный логотип легко интегрируется в любую часть сайта — в шапку, подвал или даже в загрузочный экран.

УСТАНОВКА:

• Добавьте стили
• Вставьте CSS-стили в любой подключённый к шаблону файл стилей (например, style.css или maystyle.css).
• Замените код логотипа
• Перейдите по следующему пути
• templates/ВАШ ШАБЛОН/tpl/home/top.tpl
• После этого вставьте новый код логотипа (Заменив старый)
• Настройка параметров логотипа
• Класс .logotext — отвечает за цвет текста логотипа.
• Свойство animation-delay — определяет задержку перед началом анимации, тем самым влияя на скорость и ритм её воспроизведения.

PHP:
<!-- Логотип -->
<a href="/" class="header-logo">
<div class="site_logo_neo" data-tippy-content="CODANET" data-tippy-placement="bottom">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180" height="40">
<symbol id="logotext"><text text-anchor="middle" x="50%" y="84%">CODA NET</text></symbol>
<use xlink:href="#logotext" class="logotext"></use>
<use xlink:href="#logotext" class="logotext"></use>
<use xlink:href="#logotext" class="logotext"></use>
<use xlink:href="#logotext" class="logotext"></use>
</svg>
</div>
</a>

CSS:
.header-logo {
width: 162px;
float: left;
position: relative;
top: 15px;
margin-left: -3px;
cursor: pointer;
transition: .20s all;
margin-right: 9px;
}

.header-logo:hover {
opacity: .5;
transition: all .3s
}

.logotext {
fill: transparent;
stroke-width: 2;
stroke-linejoin: round;
stroke-dasharray: 90, 310;
animation: logotext 8s infinite linear;
font-family: Poppins, arial;
font-size: 2.1em;
}

.logotext:nth-child(4n+1) {
stroke: #4fea9f;
text-shadow: 0 0 12px #4fea9f;
animation-delay: -2s;
}

.logotext:nth-child(4n+2) {
stroke: #ffffff;
text-shadow: 0 0 12px #ffffff;
animation-delay: -4s;
}

.logotext:nth-child(4n+3) {
text-shadow: 0 0 12px #4fea9f;
stroke: #4fea9f;
animation-delay: -6s;
}

.logotext:nth-child(4n+4) {
text-shadow: 0 0 12px #ffffff;
stroke: #ffffff;
animation-delay: -8s;
}

@-webkit-keyframes logotext {
100% {
stroke-dashoffset: -400;
}
}