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

Posted 4 января, 20232 yr

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

sdasdasd.png.af64b34ed47095cd5ea73e65056628ea.png

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

Edited 4 января, 20232 yr by Dusty

4 января, 20232 yr

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

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

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

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

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

Цитата

4 января, 20232 yr

Author

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

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

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

Вот

Спойлер

://katujemy.eu/

Edited 4 января, 20232 yr by Dusty

Цитата

4 января, 20232 yr

Префикс

<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 and Mano
1
1

4 января, 20232 yr

Author

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);}}

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

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

Edited 4 января, 20232 yr by Dusty

Цитата

4 января, 20232 yr

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

Цитата

4 января, 20232 yr

Author

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 получилось облачко Ка

Цитата

4 января, 20232 yr

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

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

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

Цитата

4 января, 20232 yr

Author

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"> Донатор

</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;
}

Цитата

4 января, 20232 yr

Author

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

Спойлер

ttps://katujemy.eu/uploads/set_resources_37/987964af9b7f2342354fe0d268c14e72_groups_global_animation.min.js

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

Edited 4 января, 20232 yr by Dusty

Цитата

4 января, 20232 yr

Author

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

Edited 4 января, 20232 yr by Dusty

Цитата

4 января, 20232 yr

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

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

Показать контент

ttps://katujemy.eu/uploads/set_resources_37/987964af9b7f2342354fe0d268c14e72_groups_global_animation.min.js

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

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

Цитата

4 января, 20232 yr

Author

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

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

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

Цитата

4 января, 20232 yr

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

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

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

Цитата

4 января, 20232 yr

Author

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

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

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

97882447_.png.fcd165da799b3ad09c7a9c515ab07b6d.png

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

1454059580_.png.b1048dbb3079bd59b20d3f1863d7c05c.png

Цитата

4 января, 20232 yr

Author

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

Цитата

Donjuan
1

4 января, 20232 yr

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

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

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

Цитата

4 января, 20232 yr

Author

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

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

20 минут )

Цитата

5 января, 20232 yr

17 hours ago, Dusty said:

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

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

Цитата

5 января, 20232 yr

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

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

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

Цитата

5 января, 20232 yr

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:

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

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

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

Цитата

5 января, 20232 yr

Author

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

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

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

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

Цитата

5 января, 20232 yr

1 hour ago, Dusty said:



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

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

Цитата

5 января, 20232 yr

Author

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

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

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

Использовать HTML после чего вставляешь код потом закрываешь

Спойлер

1037128524_.png.08d8aaa0a14f4821891ff5c9c8faad3b.png

Edited 5 января, 20232 yr by Dusty

Цитата

6 января, 20232 yr

14 hours ago, Dusty said:

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

Использовать HTML после чего вставляешь код потом закрываешь 

Hide contents

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

Цитата

Sign In

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

Featured Replies

Join the conversation

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

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)