Как сделать ранг "радуга" с радужным цветом и анимированным значком короны?

Posted 19 апреля, 20231 yr

comment_192399

Если вы хотите получить только анимированный эффект радуги, выполните следующие действия.

Перейдите в ACP > Внешний вид > Темы > Ваша тема > Редактировать HTML и CSS > вкладка CSS > Пользовательский > custom.css.

Вставьте следующий код в шаблон «custom.css».

.rainbow_text_animated {
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 6s ease-in-out infinite;
    background-size: 400% 100%;
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}

Сохраните шаблон и перейдите в Пользователи > Группы > Изменить группу.

В поле «Формат префикса» вставьте

<span class="rainbow_text_animated">

а во втором поле рядом с ним конечный тег, т.е.:

</span>

Если вы хотите получить градиентный текст с эффектом радуги и анимированную иконку (Font Awesome) перед именем пользователя, добавьте следующий код в custom.css под кодом для радуги, чтобы анимировать иконку короны:

.magic {
    animation: magic 3s infinite;
}
@keyframes magic {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(0.9) rotate(-6deg);
    }
    30%,
    50%,
    70% {
        transform: scale(1.15) rotate(6deg);
    }
    40%,
    60% {
        transform: scale(1.15) rotate(-6deg);
    }
    80%,
    100% {
        transform: scale(1) rotate(0);
    }
}

Сохраните шаблон и перейдите в Пользователи > Группы > Изменить группу.

В поле «Префикс формата» замените код следующим:

<span class="rainbow_text_animated"><i style="color:red;" class="fas fa-crown faa-tada animated magic" aria-hidden="true"></i>

Код будет работать в шаблоне, использующем версию 5 Font Awesome, которая принадлежит вам.

По умолчанию в шаблоне IPS по-прежнему реализована версия 4.7, которая не имеет в своей коллекции значка короны. Если кто-то использует шаблон с версией 4.7, он должен изменить иконку и класс на другой:

<span class="rainbow_text_animated"><i class="fa fa-shield magic" style="color:red;" aria-hidden="true"></i>

Как видите, я изменил значок на «щит», потому что в FA 4.7 он кажется наиболее подходящим для группы «Владелец» или «Администратор».

Окончательный результат:

tekst-gradientowy-z-efektem-teczy-animowana-ikonka-invision-community.jpg.ea55eed6870e2d8c37ba9f472ecfc186.jpg.21c6b2e651530c682a3b6c9a04b0c6ce.jpg

Вы также можете добавить к иконке/тексту эффект свечения (текст-тень) или мигающие сверкающие звезды... возможностей масса 😉

English

If you only want an animated rainbow effect, follow these steps.

Go to ACP > Appearance > Themes > Your Theme > Edit HTML & CSS > CSS tab > Custom > custom.css.

Paste the following code into the "custom.css" template.

.rainbow_text_animated {
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 6s ease-in-out infinite;
    background-size: 400% 100%;
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}

Save the template and go to Users > Groups > Edit group.

In the "Format prefix" field, paste

<span class="rainbow_text_animated">

and in the second field next to it, the ending tag, i.e.:

</span>

If you want to get a gradient text with a rainbow effect and an animated icon (Font Awesome) in front of the username, add the following code to the custom.css under the code for the rainbow to animate the crown icon:

.magic {
    animation: magic 3s infinite;
}
@keyframes magic {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(0.9) rotate(-6deg);
    }
    30%,
    50%,
    70% {
        transform: scale(1.15) rotate(6deg);
    }
    40%,
    60% {
        transform: scale(1.15) rotate(-6deg);
    }
    80%,
    100% {
        transform: scale(1) rotate(0);
    }
}

Save the template and go to Users > Groups > Edit group.

In the "Format prefix" field, replace the code with the following:

<span class="rainbow_text_animated"><i style="color:red;" class="fas fa-crown faa-tada animated magic" aria-hidden="true"></i>

The code will work in a template that uses Font Awesome version 5, which is yours.

By default, version 4.7 is still implemented in the IPS template, which does not have a crown icon in its collection. If someone uses the template with version 4.7, he must change the icon and class to another:

<span class="rainbow_text_animated"><i class="fa fa-shield magic" style="color:red;" aria-hidden="true"></i>

As you can see I changed the icon to "shield", because in FA 4.7 it seems to be the most suitable icon for the group "Owner" or "Administrator".

The final result:

tekst-gradientowy-z-efektem-teczy-animowana-ikonka-invision-community.jpg.ea55eed6870e2d8c37ba9f472ecfc186.jpg.21c6b2e651530c682a3b6c9a04b0c6ce.jpg

You can also add a glow effect (text-shadow) or blinking sparkling stars to the icon/text... there are plenty of possibilities 😉

Credit to SeNioR

Цитата

19 апреля, 20231 yr

comment_192405

49 минут назад, MrHaim сказал:
Если вы хотите получить только анимированный эффект радуги, выполните следующие действия.

Перейдите в ACP > Внешний вид > Темы > Ваша тема > Редактировать HTML и CSS > вкладка CSS > Пользовательский > custom.css.

Вставьте следующий код в шаблон «custom.css».
.rainbow_text_animated {
 background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 animation: rainbow_animation 6s ease-in-out infinite;
 background-size: 400% 100%;
}

@keyframes rainbow_animation {
 0%,100% {
 background-position: 0 0;
 }

 50% {
 background-position: 100% 0;
 }
}
Сохраните шаблон и перейдите в Пользователи > Группы > Изменить группу.

В поле «Формат префикса» вставьте

а во втором поле рядом с ним конечный тег, т.е.:

Если вы хотите получить градиентный текст с эффектом радуги и анимированную иконку (Font Awesome) перед именем пользователя, добавьте следующий код в custom.css под кодом для радуги, чтобы анимировать иконку короны:
.magic {
 animation: magic 3s infinite;
}
@keyframes magic {
 0% {
 transform: scale(1);
 }
 10% {
 transform: scale(0.9) rotate(-6deg);
 }
 30%,
 50%,
 70% {
 transform: scale(1.15) rotate(6deg);
 }
 40%,
 60% {
 transform: scale(1.15) rotate(-6deg);
 }
 80%,
 100% {
 transform: scale(1) rotate(0);
 }
}
Сохраните шаблон и перейдите в Пользователи > Группы > Изменить группу.

В поле «Префикс формата» замените код следующим:

Код будет работать в шаблоне, использующем версию 5 Font Awesome, которая принадлежит вам.

По умолчанию в шаблоне IPS по-прежнему реализована версия 4.7, которая не имеет в своей коллекции значка короны. Если кто-то использует шаблон с версией 4.7, он должен изменить иконку и класс на другой:
 
Как видите, я изменил значок на «щит», потому что в FA 4.7 он кажется наиболее подходящим для группы «Владелец» или «Администратор».

Окончательный результат:

Вы также можете добавить к иконке/тексту эффект свечения (текст-тень) или мигающие сверкающие звезды... возможностей масса 😉

English

If you only want an animated rainbow effect, follow these steps.

Go to ACP > Appearance > Themes > Your Theme > Edit HTML & CSS > CSS tab > Custom > custom.css.

Paste the following code into the "custom.css" template.
.rainbow_text_animated {
 background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 animation: rainbow_animation 6s ease-in-out infinite;
 background-size: 400% 100%;
}

@keyframes rainbow_animation {
 0%,100% {
 background-position: 0 0;
 }

 50% {
 background-position: 100% 0;
 }
}
Save the template and go to Users > Groups > Edit group.

In the "Format prefix" field, paste

and in the second field next to it, the ending tag, i.e.:

If you want to get a gradient text with a rainbow effect and an animated icon (Font Awesome) in front of the username, add the following code to the custom.css under the code for the rainbow to animate the crown icon:
.magic {
 animation: magic 3s infinite;
}
@keyframes magic {
 0% {
 transform: scale(1);
 }
 10% {
 transform: scale(0.9) rotate(-6deg);
 }
 30%,
 50%,
 70% {
 transform: scale(1.15) rotate(6deg);
 }
 40%,
 60% {
 transform: scale(1.15) rotate(-6deg);
 }
 80%,
 100% {
 transform: scale(1) rotate(0);
 }
}
Save the template and go to Users > Groups > Edit group.

In the "Format prefix" field, replace the code with the following:

The code will work in a template that uses Font Awesome version 5, which is yours.

By default, version 4.7 is still implemented in the IPS template, which does not have a crown icon in its collection. If someone uses the template with version 4.7, he must change the icon and class to another:
 
As you can see I changed the icon to "shield", because in FA 4.7 it seems to be the most suitable icon for the group "Owner" or "Administrator".

The final result:

You can also add a glow effect (text-shadow) or blinking sparkling stars to the icon/text... there are plenty of possibilities 😉

Credit to SeNioR

что делать? сделал по инструкции, но почему-то не получилось

Цитата

19 апреля, 20231 yr

Author

comment_192406

1 минуту назад, Kolya_Barakov сказал:

что делать? сделал по инструкции, но почему-то не получилось

Вы сохранили изменения в шаблоне?

Цитата

19 апреля, 20231 yr

comment_192408

11 минут назад, MrHaim сказал:

Вы сохранили изменения в шаблоне?

Да, сохранил

Цитата

19 апреля, 20231 yr

Author

comment_192409

1 минуту назад, Kolya_Barakov сказал:

Да, сохранил

Странно, простите меня, если мой русский плохой.
я использую гугл переводчик
Пожалуйста, пришлите мне скриншот

Цитата

19 апреля, 20231 yr

comment_192410

Только что, MrHaim сказал:

Странно, простите меня, если мой русский плохой.
я использую гугл переводчик
Пожалуйста, пришлите мне скриншот

Цитата

19 апреля, 20231 yr

Author

comment_192411

Только что, Kolya_Barakov сказал:

Что вы хотите видеть в Нике? Можете ли вы объяснить мне больше, что вам нужно?

Цитата

19 апреля, 20231 yr

comment_192412

Только что, MrHaim сказал:

Что вы хотите видеть в Нике? Можете ли вы объяснить мне больше, что вам нужно?

Я хочу видеть анимацию переливания

Цитата

19 апреля, 20231 yr

Author

comment_192413

Только что, Kolya_Barakov сказал:

Я хочу видеть анимацию переливания

У вас есть пример, чтобы показать мне, что вы имеете в виду?

Цитата

19 апреля, 20231 yr

comment_192414

4 минуты назад, Kolya_Barakov сказал:

Я хочу видеть анимацию переливания

Что то такое?

Цитата

19 апреля, 20231 yr

comment_192415

1 минуту назад, aLEX49566 сказал:

Что то такое?

Да, что-то подобное мне нужно

@MrHaim

Edited 19 апреля, 20231 yr by Kolya_Barakov

Цитата

19 апреля, 20231 yr

comment_192416

4 минуты назад, Kolya_Barakov сказал:

Да, что-то подобное мне нужно

@MrHaim

Цитата

MrHaim
1

19 апреля, 20231 yr

comment_192417

1 минуту назад, aLEX49566 сказал:

<span style='color: #fd190d; background:url(/zam.gif);font-weight: bold;-webkit-text-fill-color: transparent;-webkit-background-clip: text;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.11);background-size: cover;'>

А что с этим делать? не знаю, к сожалению. Можете предоставить подробную инструкцию?

Цитата

19 апреля, 20231 yr

comment_192418

1 минуту назад, Kolya_Barakov сказал:

А что с этим делать? не знаю, к сожалению. Можете предоставить подробную инструкцию?

а гифку надо загрузить в файлы на хостинге и указать до нее

Цитата

19 апреля, 20231 yr

Author

comment_192419

2 минуты назад, Kolya_Barakov сказал:

А что с этим делать? не знаю, к сожалению. Можете предоставить подробную инструкцию?

На мой взгляд, поместите код здесь

Screenshot_2023-04-19-16-23-32-50_40deb401b9ffe8e1df2f1cc5ba480b12.jpg.79973a6dbf781a7b080587a70fb7d63f.jpg.95be5dd96685ee8662d169a206c9498c.jpg

Цитата

19 апреля, 20231 yr

comment_192422

10 минут назад, aLEX49566 сказал:

а гифку надо загрузить в файлы на хостинге и указать до нее

это нужно вставить вместо этого - /zam.gif?

Цитата

19 апреля, 20231 yr

comment_192423

8 минут назад, Kolya_Barakov сказал:

это нужно вставить вместо этого - /zam.gif?

Лучше загрузить через ftp, в корень сайта

Цитата

19 апреля, 20231 yr

Author

comment_192424

8 минут назад, Kolya_Barakov сказал:

это нужно вставить вместо этого - /zam.gif?

Изображение, которое он отправил сюда, должно быть загружено в основную папку FTP.

Цитата

19 апреля, 20231 yr

comment_192425

4 минуты назад, aLEX49566 сказал:

Лучше загрузить через ftp, в корень сайта

а как это сделать?

Цитата

19 апреля, 20231 yr

Author

comment_192426

1 минуту назад, Kolya_Barakov сказал:

а как это сделать?

Загрузите картинку, которую он прислал сюда.
Получите доступ к FTP и загрузите файл с именем zam.gif в Public_html.

Цитата

19 апреля, 20231 yr

comment_192430

13 минут назад, MrHaim сказал:

Загрузите картинку, которую он прислал сюда.
Получите доступ к FTP и загрузите файл с именем zam.gif в Public_html.

я не могу разобраться... можете подсказать более подробно?

где находится эта основная папка ftp?

Цитата

19 апреля, 20231 yr

comment_192431

13 минут назад, Kolya_Barakov сказал:

я не могу разобраться... можете подсказать более подробно?

где находится эта основная папка ftp?

Загрузите картинку на сайт, уже любым удобным способом и укажите путь до нее 🙈

Цитата

19 апреля, 20231 yr

comment_192432

2 минуты назад, aLEX49566 сказал:

Загрузите картинку на сайт, уже любым удобным способом и укажите путь до нее 🙈

Сообщением можно опубликовать и указать путь?

Цитата

19 апреля, 20231 yr

Author

comment_192433

image.png.7dfb2ceed6ba6939c20c1187a1a7b226.png.c890af689b7a2f51ae4d49e6b1fa1199.png

Go to ACP > Appearance > Themes > Your theme > Edit HTML & CSS > CSS tab > custom > custom.css.

Paste the following code into the "custom.css" template.

This is code using the "keyframes" property that allows you to add an animation. The movement of the animation has been matched to the movement of the hammer, i.e. our icon in front of the group name.

 @keyframes wrench {
     0% {
         -webkit-transform: rotate(-12deg);
         transform: rotate(-12deg)
     }
     8% {
         -webkit-transform: rotate(12deg);
         transform: rotate(12deg)
     }
     10% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     18% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     20% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     28% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     30% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     38% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     40% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     48% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     50% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     58% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     60% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     68% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     100%,
     75% {
         -webkit-transform: rotate(0);
         transform: rotate(0)
     }
 }

 .faa-parent.animated-hover:hover>.faa-wrench,
 .faa-wrench.animated,
 .faa-wrench.animated-hover:hover {
     -webkit-animation: wrench 2.5s ease infinite;
     animation: wrench 2.5s ease infinite;
     transform-origin-x: 90%;
     transform-origin-y: 35%;
     transform-origin-z: initial
 }

Save the template and go to Users > Groups > Edit group.

In the "Format prefix" field, paste

<span style="color: #d369dc;font-weight:bold;text-shadow: 0px 1px 9px #d369dc;"><i class="fa fa-gavel faa-wrench animated" aria-hidden="true"></i>

and in the second field next to the ending tag, i.e.:

</span>

Russian

image.png.7dfb2ceed6ba6939c20c1187a1a7b226.png.c890af689b7a2f51ae4d49e6b1fa1199.png

Перейдите в ACP > Внешний вид > Темы > Ваша тема > Редактировать HTML и CSS > вкладка CSS > пользовательский > custom.css.

Вставьте следующий код в шаблон «custom.css».

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

 @keyframes wrench {
     0% {
         -webkit-transform: rotate(-12deg);
         transform: rotate(-12deg)
     }
     8% {
         -webkit-transform: rotate(12deg);
         transform: rotate(12deg)
     }
     10% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     18% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     20% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     28% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     30% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     38% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     40% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     48% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     50% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     58% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     60% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     68% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     100%,
     75% {
         -webkit-transform: rotate(0);
         transform: rotate(0)
     }
 }

 .faa-parent.animated-hover:hover>.faa-wrench,
 .faa-wrench.animated,
 .faa-wrench.animated-hover:hover {
     -webkit-animation: wrench 2.5s ease infinite;
     animation: wrench 2.5s ease infinite;
     transform-origin-x: 90%;
     transform-origin-y: 35%;
     transform-origin-z: initial
 }

Сохраните шаблон и перейдите в Пользователи > Группы > Изменить группу.

В поле «Формат префикса» вставьте

<span style="color: #d369dc;font-weight:bold;text-shadow: 0px 1px 9px #d369dc;"><i class="fa fa-gavel faa-wrench animated" aria-hidden="true"></i>

и во втором поле рядом с закрывающим тегом, т.е.:

</span>

Credit to SeNioR

Цитата

19 апреля, 20231 yr

comment_192434

ну так я же кинул, но из файлов в ац. или по-другому? я не понимаю

Цитата

Sign In

Как сделать ранг "радуга" с радужным цветом и анимированным значком короны?

Featured Replies

Join the conversation

Последние посетители 0

Account

Navigation

Messages

Уведомления

Search