Jump to content
Sign in to follow this  
`ferN

Statystyki forum z pulsującym border-bottom MyBB

Recommended Posts

Witam , mam taki problem a mianowicie podobają mi się pewne statystyki pewnej sieci i chciałbym zrobić sobie z podobnym efektem tylko nie mam pojęcia jak ;/ 

Link do forum ze statystykami: https://wyjasniamy.eu/forum/

Screen: https://scr.hu/kXR92y

Chodzi  mi, żeby border-bottom pulsował tak jak na forum powyżej.

Prosiłbym o pomoc :> Z Góry Dziękuje ☺️

Share this post


Link to post

Mógłbyś bardziej wytłumaczyć jak to zrobić ale podać gotowy już kod bo tak średnio ogarniam ;c

 

Share this post


Link to post

Poczytaj o takiej animacji jak pulse (pulse animation css3) i spróbuj coś sam skleić, a jeżeli chcesz gotowca to wejdź na forum wyjaśniamy.eu  kliknij prawy przycisk myszy  zbadaj element / zbadaj  a następnie odnajdź klasę .pulse i inteligentnie skopiuj CSS

Edited by rogue

Share this post


Link to post
Godzinę temu, rogue napisał:

Poczytaj o takiej animacji jak pulse (pulse animation css3) i spróbuj coś sam skleić, a jeżeli chcesz gotowca to wejdź na forum wyjaśniamy.eu  kliknij prawy przycisk myszy  zbadaj element / zbadaj  a następnie odnajdź klasę .pulse i inteligentnie skopiuj CSS

Ja tutaj widzę, że to gotowy obrazek gif. Co ma się chłopak przemęczać z kopiowaniem kodu, jeszcze źle wklei i popsuje wygląd swojego forum.

Share this post


Link to post

@rogue inteligentne skopiowanie css .pulse nic nie da mistrzu:) probowalem.

@ShanonWEB  to zle widzisz obrazek .gif sa tylko na belkach zrobione a nie na elemencie, ktory zaznaczyłem:)

 

P.S Prosiłem czy ktoś moglby wykonac dla mnie te statystyki a nie opisanie co to jest. A jezeli tak zrozumiales Panie @ShanonWEB to nie wiem za co i po co masz range support jezeli w ten sposob mi ani troche nie pomagasz.

Share this post


Link to post

Gotowca i tak nie dostaniesz. Skoro "średnio ogarniasz" to powinieneś dać radę zrobić to sam po przeczytaniu kilku tutkow o animacjach w css3.

 

Ja Ci powiedziałem, zostaje wykorzystany efekt pulse w przykładzie co podałeś, reszta zależy od Ciebie.

  • Like 2

Share this post


Link to post
6 godzin temu, `ferN napisał:

@rogue inteligentne skopiowanie css .pulse nic nie da mistrzu:) probowalem.

@ShanonWEB  to zle widzisz obrazek .gif sa tylko na belkach zrobione a nie na elemencie, ktory zaznaczyłem:)

 

P.S Prosiłem czy ktoś moglby wykonac dla mnie te statystyki a nie opisanie co to jest. A jezeli tak zrozumiales Panie @ShanonWEB to nie wiem za co i po co masz range support jezeli w ten sposob mi ani troche nie pomagasz.

Zawsze jesteś taki arogancki? Pomyliłem temat, zdarza się.

  • Like 2

Share this post


Link to post
Spoiler

@keyframes pulse {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  8% {
    opacity: 0;
    transform: scale(0);
  }
  15% {
    opacity: 1;
    transform: scale(0.1);
  }
  30% {
    opacity: 1;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  8% {
    opacity: 0;
    transform: scale(0);
  }
  15% {
    opacity: 1;
    transform: scale(0.1);
  }
  30% {
    opacity: 1;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
.pulse {
  animation: 2s linear 0s normal none infinite running pulse;
  background-color: transparent;
  border-bottom: 2px solid #ff9497;
  border-image: initial;
  box-shadow: 0 0 26px 0 rgba(255, 148, 151, 1);
  height: 1px;
  margin: 0 auto -9px;
  opacity: 0.1;
  position: relative;
  width: 100%;
  z-index: 10;
}

 

 

  • Like 2

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...