Jump to content

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

Dusty
Dusty
in Invision Community 4 Support

Featured Replies

Posted
comment_188973

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

sdasdasd.png.af64b34ed47095cd5ea73e65056628ea.png

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

 

Edited by Dusty

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

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

    sdasdasd.png.af64b34ed47095cd5ea73e65056628ea.png

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

     

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

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

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

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

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

    Вот 

    Спойлер

    ://katujemy.eu/

    Edited by Dusty

  • Цитата
    comment_188976

    Префикс 

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

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

  • Цитата
    • Author
    comment_188977
    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

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

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

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

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

  • Цитата
    • Author
    comment_188981
    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;
}

     

  • Цитата
    • Author
    comment_188982

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

    Спойлер

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

     

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

    Edited by Dusty

  • Цитата
    • Author
    comment_188983

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

    Edited by Dusty

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

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

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

     

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

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

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

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

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

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

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

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

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

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

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

     97882447_.png.fcd165da799b3ad09c7a9c515ab07b6d.png

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

    1454059580_.png.b1048dbb3079bd59b20d3f1863d7c05c.png

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

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

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

  • Цитата
    comment_189010
    17 hours ago, Dusty said:

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

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

    1.PNG

    2.PNG

  • Цитата
    comment_189016
    1 час назад, AzeTural сказал:

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

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

  • Цитата
    comment_189017
    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:

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

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

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

  • Цитата
    • Author
    comment_189022
    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>

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

  • Цитата
    comment_189024
    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

  • Цитата
    • Author
    comment_189027
    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

  • Цитата
    comment_189047
    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

     

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

  • Цитата

    • 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
    Ответить в этой теме...
    Go to topic listing

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

    • No registered users viewing this page.