Перейти к содержанию

Анимация в группе


Рекомендуемые сообщения

Кто подскажет как правильно добавить анимацию с этих групп  Девушка и Инвестор?

sdasdasd.png.af64b34ed47095cd5ea73e65056628ea.png

Все попробовал ничего не получается )

 

Изменено пользователем Dusty
Ссылка на комментарий
Поделиться на другие сайты

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

Кто подскажет как правильно добавить анимацию с этих групп  Девушка и Инвестор?

sdasdasd.png.af64b34ed47095cd5ea73e65056628ea.png

Все попробовал ничего не получается )

 

С помощью CSS (какой вопрос, такой ответ)

Нужен пример, где это увидели

Ссылка на комментарий
Поделиться на другие сайты

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

С помощью CSS (какой вопрос, такой ответ)

Нужен пример, где это увидели

Вот 

Спойлер

Изменено пользователем Dusty
Ссылка на комментарий
Поделиться на другие сайты

Префикс

<span class="girlgroup particletext hearts"><i class="fa-regular fa-heart"></i>

Суффикс

<span class="particle particle_1"></span>
<span class="particle particle_2"></span>
<span class="particle particle_3"></span>
</span>

custom.css

.girlgroup {
	font-weight: 700;
    text-shadow: 0 0 11px rgb(204 42 93 / 30%);
    color: #cc2a5d;
}
.particletext{
position:relative;
}
.particletext.hearts>.particle{
opacity:0;position:absolute;background-color:rgb(204, 42, 93);animation:hearts 6s ease-in infinite;
}
.particletext.hearts > .particle::before, .particletext.hearts > .particle::after
{
position:absolute;content:'';border-radius:100px;top:var(--sp-0);left:var(--sp-0);width:100%;height:100%;background-color:rgb(204, 42, 93);
}
.particletext.hearts>.particle::before{
transform:translateX(-50%);
}
.particletext.hearts>.particle::after
{
transform:translateY(-50%);
}

.particle_1 {
  top:39%; left:58%;width:7px; height:7px;animation-delay: 3s;
}
.particle_2 {
  top:34%; left:74%;width:11.7px; height:11.7px;animation-delay: 3.3s;
}
.particle_3 {
 top:20%; left:70%;width:8.2px; height:8.2px;animation-delay: 3.5s;
}
@keyframes hearts{0%{opacity:0;transform:translate(0, 0%) rotate(45deg);}20%{opacity:0.8;transform:translate(0, -20%) rotate(45deg);}100%{opacity:0;transform:translate(0, -500%) rotate(45deg);}}

И по такому образцу остальное

Ссылка на комментарий
Поделиться на другие сайты

1 час назад, HooLIGUN сказал:

Префикс

<span class="girlgroup particletext hearts"><i class="fa-regular fa-heart"></i>

Суффикс

<span class="particle particle_1"></span>
<span class="particle particle_2"></span>
<span class="particle particle_3"></span>
</span>

custom.css


.girlgroup {
	font-weight: 700;
    text-shadow: 0 0 11px rgb(204 42 93 / 30%);
    color: #cc2a5d;
}
.particletext{
position:relative;
}
.particletext.hearts>.particle{
opacity:0;position:absolute;background-color:rgb(204, 42, 93);animation:hearts 6s ease-in infinite;
}
.particletext.hearts > .particle::before, .particletext.hearts > .particle::after
{
position:absolute;content:'';border-radius:100px;top:var(--sp-0);left:var(--sp-0);width:100%;height:100%;background-color:rgb(204, 42, 93);
}
.particletext.hearts>.particle::before{
transform:translateX(-50%);
}
.particletext.hearts>.particle::after
{
transform:translateY(-50%);
}

.particle_1 {
  top:39%; left:58%;width:7px; height:7px;animation-delay: 3s;
}
.particle_2 {
  top:34%; left:74%;width:11.7px; height:11.7px;animation-delay: 3.3s;
}
.particle_3 {
 top:20%; left:70%;width:8.2px; height:8.2px;animation-delay: 3.5s;
}
@keyframes hearts{0%{opacity:0;transform:translate(0, 0%) rotate(45deg);}20%{opacity:0.8;transform:translate(0, -20%) rotate(45deg);}100%{opacity:0;transform:translate(0, -500%) rotate(45deg);}}

И по такому образцу остальное

Спасибо помог )

Изменено пользователем Dusty
Ссылка на комментарий
Поделиться на другие сайты

Я не знаю, как это сделать, но я думаю, что это действительно круто

Ссылка на комментарий
Поделиться на другие сайты

1 час назад, HooLIGUN сказал:

Префикс

<span class="girlgroup particletext hearts"><i class="fa-regular fa-heart"></i>

Суффикс

<span class="particle particle_1"></span>
<span class="particle particle_2"></span>
<span class="particle particle_3"></span>
</span>

custom.css


.girlgroup {
	font-weight: 700;
    text-shadow: 0 0 11px rgb(204 42 93 / 30%);
    color: #cc2a5d;
}
.particletext{
position:relative;
}
.particletext.hearts>.particle{
opacity:0;position:absolute;background-color:rgb(204, 42, 93);animation:hearts 6s ease-in infinite;
}
.particletext.hearts > .particle::before, .particletext.hearts > .particle::after
{
position:absolute;content:'';border-radius:100px;top:var(--sp-0);left:var(--sp-0);width:100%;height:100%;background-color:rgb(204, 42, 93);
}
.particletext.hearts>.particle::before{
transform:translateX(-50%);
}
.particletext.hearts>.particle::after
{
transform:translateY(-50%);
}

.particle_1 {
  top:39%; left:58%;width:7px; height:7px;animation-delay: 3s;
}
.particle_2 {
  top:34%; left:74%;width:11.7px; height:11.7px;animation-delay: 3.3s;
}
.particle_3 {
 top:20%; left:70%;width:8.2px; height:8.2px;animation-delay: 3.5s;
}
@keyframes hearts{0%{opacity:0;transform:translate(0, 0%) rotate(45deg);}20%{opacity:0.8;transform:translate(0, -20%) rotate(45deg);}100%{opacity:0;transform:translate(0, -500%) rotate(45deg);}}

И по такому образцу остальное

У меня почему то вместо Dollar получилось облачко :( Ка

Ссылка на комментарий
Поделиться на другие сайты

39 минут назад, Dusty сказал:

У меня почему то вместо Dollar получилось облачко :( Ка

Показывай :) Что химичишь там

Ссылка на комментарий
Поделиться на другие сайты

25 минут назад, HooLIGUN сказал:

Показывай :) Что химичишь там

Сам не знаю что нахимичил просто попробовал повроить туже схему что в оригинале  

Спойлер

<li> <span style="font-weight:700;text-shadow:0 0 11px rgba(114, 218, 173, 0.3);color:#72daad;background:url('https://katujemy.eu/uploads/groups/stars_inwestor.gif');" class="p-new-group-inwestor particletext dollar"><i class="fa-brands fa-bitcoin"></i> Донатор
   
<span class="particle" style="top:40%; left:5%;width:8px; height:8px;animation-delay: 3.8s;"></span><span class="particle" style="top:40%; left:5%;width:8px; height:8px;animation-delay: 2.1s;"></span><span class="particle" style="top:40%; left:53%;width:8px; height:8px;animation-delay: 3.9s;"></span></span></li>

Но код он повторяет из 1 варианта где прописал для Сердечко ) Может не правильно прописал в Particle или KeyFrames

Спойлер

@keyframes dollarAnimation{0%{opacity:0;transform:translate(0, 0%) rotate(45deg);}20%{opacity:0.8;transform:translate(0, -20%) rotate(45deg);}100%{opacity:0;transform:translate(0, -500%) rotate(45deg);}}

И добавил это 

.particletext.dollar>.particle {
    opacity: 0;
    position: absolute;
    background-color: transparent;
    text-shadow: unset !importnat;
    animation: dollarAnimation 6s ease-in infinite;
}

.particletext.dollar > .particle::before, .particletext.dollar > .particle::after {
    position: absolute;
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    content: "\24";
    border-radius: 100px;
    top: var(--sp-0);
    left: var(--sp-0);
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
    text-shadow: unset !important;
    background-color: transparent;
}

 

Ссылка на комментарий
Поделиться на другие сайты

Нашел их скрипт который отвечает за эти анимации где прописаны для многих групп но я не понял как его подключить у себя :(

 

Скрипт подключил но анимацию $ все равно показывает как облачко (

Изменено пользователем Dusty
Ссылка на комментарий
Поделиться на другие сайты

Проблема в моем KeyFrames оказывается не правильно прописал но все равно показывает виде облако )

Изменено пользователем Dusty
Ссылка на комментарий
Поделиться на другие сайты

32 минуты назад, Dusty сказал:

Нашел их скрипт который отвечает за эти анимации где прописаны для многих групп но я не понял как его подключить у себя :(

 

Скрипт подключил но анимацию $ все равно показывает как облачко (

У меня без этого скрипта запустилось.

Ссылка на комментарий
Поделиться на другие сайты

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

У меня без этого скрипта запустилось.

Вместо $ облако выходит не понимаю почему (

Ссылка на комментарий
Поделиться на другие сайты

5 минут назад, Dusty сказал:

Вместо $ облако выходит не понимаю почему (

Покажи, что вставляешь, полностью 

Ссылка на комментарий
Поделиться на другие сайты

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

Покажи, что вставляешь, полностью 

Еще такая фигня с твоим вариантом при анимации сердца (сердечко не полное)

 97882447_.png.fcd165da799b3ad09c7a9c515ab07b6d.png

Он почему то блокирует в CSS animation-delay 

1454059580_.png.b1048dbb3079bd59b20d3f1863d7c05c.png

Ссылка на комментарий
Поделиться на другие сайты

Я понял в чем была вся проблема мешал нормально работать другой код от before  , можно закрыть тему.

Ссылка на комментарий
Поделиться на другие сайты

58 минут назад, Dusty сказал:

Я понял в чем была вся проблема мешал нормально работать другой код от before  , можно закрыть тему.

Это 5 часов убили ?)

Ссылка на комментарий
Поделиться на другие сайты

4 часа назад, Donjuan сказал:

Это 5 часов убили ?)

20 минут )

Ссылка на комментарий
Поделиться на другие сайты

17 hours ago, Dusty said:

Я понял в чем была вся проблема мешал нормально работать другой код от before  , можно закрыть тему.

Привет. Итак, как мне создать такие анимированные имена групп?

1.PNG

2.PNG

Ссылка на комментарий
Поделиться на другие сайты

1 час назад, AzeTural сказал:

Привет. Итак, как мне создать такие анимированные имена групп?

Попробовать для начала прочитать тему

Ссылка на комментарий
Поделиться на другие сайты

23 hours ago, HooLIGUN said:

Префикс

<span class="girlgroup particletext hearts"><i class="fa-regular fa-heart"></i>

Суффикс

<span class="particle particle_1"></span>
<span class="particle particle_2"></span>
<span class="particle particle_3"></span>
</span>

custom.css

.girlgroup {
	font-weight: 700;
    text-shadow: 0 0 11px rgb(204 42 93 / 30%);
    color: #cc2a5d;
}
.particletext{
position:relative;
}
.particletext.hearts>.particle{
opacity:0;position:absolute;background-color:rgb(204, 42, 93);animation:hearts 6s ease-in infinite;
}
.particletext.hearts > .particle::before, .particletext.hearts > .particle::after
{
position:absolute;content:'';border-radius:100px;top:var(--sp-0);left:var(--sp-0);width:100%;height:100%;background-color:rgb(204, 42, 93);
}
.particletext.hearts>.particle::before{
transform:translateX(-50%);
}
.particletext.hearts>.particle::after
{
transform:translateY(-50%);
}

.particle_1 {
  top:39%; left:58%;width:7px; height:7px;animation-delay: 3s;
}
.particle_2 {
  top:34%; left:74%;width:11.7px; height:11.7px;animation-delay: 3.3s;
}
.particle_3 {
 top:20%; left:70%;width:8.2px; height:8.2px;animation-delay: 3.5s;
}
@keyframes hearts{0%{opacity:0;transform:translate(0, 0%) rotate(45deg);}20%{opacity:0.8;transform:translate(0, -20%) rotate(45deg);}100%{opacity:0;transform:translate(0, -500%) rotate(45deg);}}

И по такому образцу остальное

 

18 minutes ago, Exception said:

Попробовать для начала прочитать тему

Из приведенных выше кодов я смог запустить только их. Но я просто хочу, чтобы он выглядел блестящим в цветовой гамме нашего красного, а не в сердечках. Какой код я должен использовать для этого?

Кстати, я печатаю с помощью гугл-переводчика. Возможно, я ошибся в написании некоторых слов.

Ссылка на комментарий
Поделиться на другие сайты

1 час назад, AzeTural сказал:

 

Из приведенных выше кодов я смог запустить только их. Но я просто хочу, чтобы он выглядел блестящим в цветовой гамме нашего красного, а не в сердечках. Какой код я должен использовать для этого?

Кстати, я печатаю с помощью гугл-переводчика. Возможно, я ошибся в написании некоторых слов.

<span style="font-weight: 700; text-shadow: 0 0 11px rgba(255, 0, 0, 0.3); color: #bb0909; background: url('https://katujemy.eu/uploads/groups/stars_owner.gif');"><i class="fa-solid fa-star fa-spin"></i></span>

и т.д Методом правой кнопкой по элементу и найдешь все что ты хотел ))

Ссылка на комментарий
Поделиться на другие сайты

1 hour ago, Dusty said:

<span style="font-weight: 700; text-shadow: 0 0 11px rgba(255, 0, 0, 0.3); color: #bb0909; background: url('https://katujemy.eu/uploads/groups/stars_owner.gif');"><i class="fa-solid fa-star fa-spin"></i></span>

и т.д Методом правой кнопкой по элементу и найдешь все что ты хотел ))

Похоже на это.

Capture.PNG

Ссылка на комментарий
Поделиться на другие сайты

1 час назад, AzeTural сказал:

Похоже на это.

Capture.PNG

Ну наверно надо немного подумать и вставить правильно в группе  

Использовать HTML  после чего вставляешь код  <span style="font-weight: 700; text-shadow: 0 0 11px rgba(255, 0, 0, 0.3); color: #bb0909; background: url('https://katujemy.eu/uploads/groups/stars_owner.gif');"><i class="fa-solid fa-star fa-spin"></i> потом закрываешь </span>

Спойлер

1037128524_.png.08d8aaa0a14f4821891ff5c9c8faad3b.png

 

Изменено пользователем Dusty
Ссылка на комментарий
Поделиться на другие сайты

14 hours ago, Dusty said:

Ну наверно надо немного подумать и вставить правильно в группе  

Использовать HTML  после чего вставляешь код  <span style="font-weight: 700; text-shadow: 0 0 11px rgba(255, 0, 0, 0.3); color: #bb0909; background: url('https://katujemy.eu/uploads/groups/stars_owner.gif');"><i class="fa-solid fa-star fa-spin"></i> потом закрываешь </span>

  Hide contents

1037128524_.png.08d8aaa0a14f4821891ff5c9c8faad3b.png

 

ОК, теперь все готово. Итак, как добавить маленькие значки рядом с ним? Как бриллиант, движущаяся звезда, сердце?

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...