Jump to content

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

Dusty
 Share

Recommended Posts

Dusty Mentor

Dusty

Posted
Posted (edited)

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

sdasdasd.png.af64b34ed47095cd5ea73e65056628ea.png

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

 

Edited by Dusty
Link to comment
Share on other sites
HooLIGUN Veteran

HooLIGUN

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

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

sdasdasd.png.af64b34ed47095cd5ea73e65056628ea.png

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

 

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

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

Link to comment
Share on other sites
Dusty Mentor

Dusty

Posted
  • Author
Posted (edited)
2 минуты назад, HooLIGUN сказал:

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

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

Вот 

Спойлер

://katujemy.eu/

Edited by Dusty
Link to comment
Share on other sites
HooLIGUN Veteran

HooLIGUN

Posted
Posted

Префикс 

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

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

Link to comment
Share on other sites
Dusty Mentor

Dusty

Posted
  • Author
Posted (edited)
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 by Dusty
Link to comment
Share on other sites
Dusty Mentor

Dusty

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

Link to comment
Share on other sites
Dusty Mentor

Dusty

Posted
  • Author
Posted
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;
}

 

Link to comment
Share on other sites
Dusty Mentor

Dusty

Posted
  • Author
Posted (edited)

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

Спойлер

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

 

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

Edited by Dusty
Link to comment
Share on other sites
Dusty Mentor

Dusty

Posted
  • Author
Posted (edited)

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

Edited by Dusty
Link to comment
Share on other sites
HooLIGUN Veteran

HooLIGUN

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

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

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

 

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

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

Link to comment
Share on other sites
Dusty Mentor

Dusty

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

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

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

Link to comment
Share on other sites
Dusty Mentor

Dusty

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

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

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

 97882447_.png.fcd165da799b3ad09c7a9c515ab07b6d.png

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

1454059580_.png.b1048dbb3079bd59b20d3f1863d7c05c.png

Link to comment
Share on other sites
Donjuan Mentor

Donjuan

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

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

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

Link to comment
Share on other sites
AzeTural Apprentice

AzeTural

Posted
Posted
17 hours ago, Dusty said:

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

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

1.PNG

2.PNG

Link to comment
Share on other sites
Exception Mentor

Exception

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

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

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

Link to comment
Share on other sites
AzeTural Apprentice

AzeTural

Posted
Posted
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:

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

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

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

Link to comment
Share on other sites
Dusty Mentor

Dusty

Posted
  • Author
Posted
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>

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

Link to comment
Share on other sites
AzeTural Apprentice

AzeTural

Posted
Posted
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

Link to comment
Share on other sites
Dusty Mentor

Dusty

Posted
  • Author
Posted (edited)
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

 

Edited by Dusty
Link to comment
Share on other sites
AzeTural Apprentice

AzeTural

Posted
Posted
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

 

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

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

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...