CSS Shape & Animation

CSS Shape & Animation
Jakub Prażmowski
Jakub Prażmowski
Jakub Prażmowski
Jakub Prażmowski
  • Rejestracja:około 5 lat
  • Ostatnio:około 5 lat
  • Postów:110
0

Witam... Na stronie mindriver.pl mam animowany kwadracik. Lata z boku na bok i zmienia kolor. Chciałbym zmienić mu kształ na serduszko. Znalazłem kształt ale nawet jak je zaprzęgnę do roboty i lata mi z boku na bok, to nie zmienia kolorów. Możecie mi doradzić co mam zrobić aby oprócz tego, że się rusza... zmieniało kolor? Kod mam taki... i trzeba to jakoś połączyć w kupę i dodać modyfikacje.

Kopiuj
#heart {
      position: relative;
      width: 100px;
      height: 90px;
    }
    #heart:before,
    #heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    #heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }

div.cylon {
  width: 20px;
  height: 20px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:-290px; top:0px;}
  25%  {background-color:yellow; left:290px; top:0px;}
  50%  {background-color:#55acee; left:-290px; top:0px;}   <? //blue ?>
  75%  {background-color:#00ff2c; left:290px; top:0px;} <? //green ?>
  100% {background-color:red; left:-290px; top:0px;}
}

Tutaj mam przykład. Patrzcie co się dzieje. To powiedzcie mi przynajmniej co mam zrobić, żeby to serduszko się obniżyło. Hmm... Żeby ładnie pasowało do kwadratu który zmienia kolor. Dziękuję. Pozdrawiam.

Kuba

edytowany 1x, ostatnio: Jakub Prażmowski
Jakub Prażmowski
Chyba się rzuciłem na zbyt głęboką css-ową wodę, co?
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Jakub Prażmowski
Jakub Prażmowski
Jakub Prażmowski
Jakub Prażmowski
  • Rejestracja:około 5 lat
  • Ostatnio:około 5 lat
  • Postów:110
0
Jakub Prażmowski napisał(a):

Witam... Na stronie mindriver.pl mam animowany kwadracik. Lata z boku na bok i zmienia kolor. Chciałbym zmienić mu kształ na serduszko. Znalazłem kształt ale nawet jak je zaprzęgnę do roboty i lata mi z boku na bok, to nie zmienia kolorów. Możecie mi doradzić co mam zrobić aby oprócz tego, że się rusza... zmieniało kolor? Kod mam taki... i trzeba to jakoś połączyć w kupę i dodać modyfikacje.

Kopiuj
#heart {
      position: relative;
      width: 100px;
      height: 90px;
    }
    #heart:before,
    #heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    #heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }

div.cylon {
  width: 20px;
  height: 20px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:-290px; top:0px;}
  25%  {background-color:yellow; left:290px; top:0px;}
  50%  {background-color:#55acee; left:-290px; top:0px;}   <? //blue ?>
  75%  {background-color:#00ff2c; left:290px; top:0px;} <? //green ?>
  100% {background-color:red; left:-290px; top:0px;}
}

Tutaj mam przykład. Patrzcie co się dzieje. To powiedzcie mi przynajmniej co mam zrobić, żeby zmniejszyć marginesy na około tego latającego kwadracika. Wrzucam przykład: link

Dziękuję. Pozdrawiam.

Kuba

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Riki
RI
Riki
RI
  • Rejestracja:około 5 lat
  • Ostatnio:około 5 lat
  • Postów:40
0

Nie wiem czy o takim efekcie myślałeś.
Serduszko zerżnąłem ze stacka (strony nie pamiętam).

Kopiuj
<html>
    <head>
        <style>
    #heart {
        position:relative;
        background-color: inherit;
        height: 175px;
        transform: rotate(-45deg);
        width: 100px;
        border-radius: 50px 50px 0 0;
    }
    #heart:before {
        position: absolute;
        width: 175px;
        height: 100px;
        left: 0;
        bottom: 0;
        content: "";
        background-color: inherit;
        border-radius: 0 50px 50px 0;
    }

#heart {
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background:red; left:20%; top:0px;}
  25%  {background:yellow; left:70%; top:0px;}
  50%  {background:orange; left:20%; top:0px;}     
  75%  {background:blue; left:70%; top:0px;}    
  100% {background:red; left:20%; top:0px;}
}
        </style>
    </head>

    <body>

        <div id="heart"></div>
    </body>
</html>
Jakub Prażmowski
Wrzuciłbyś jakiegoś linka, żeby można od razu zobaczyć jak to działą. :-) Sterduszko się rusza i zmienia kolor? Hehe. Ty fajnie! Oto właśnie chodziło. Hmm... A więc inherit! :-) Zminejszam i wrzucam na stronkę. Genialne. Dzięki bardzo! Hehe! :-) B-)
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
czysteskarpety
czysteskarpety
czysteskarpety
czysteskarpety
  • Rejestracja:około 10 lat
  • Ostatnio:ponad 4 lata
  • Lokalizacja:Piwnica
  • Postów:7697
0

Dodajesz efekt z libki animate.css i animation-iteration-count: infinite; (już pomijając sens takiego efektu).

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Jakub Prażmowski
Jakub Prażmowski
Jakub Prażmowski
Jakub Prażmowski
  • Rejestracja:około 5 lat
  • Ostatnio:około 5 lat
  • Postów:110
0
Riki napisał(a):

Nie wiem czy o takim efekcie myślałeś.
Serduszko zerżnąłem ze stacka (strony nie pamiętam).

Kopiuj
<html>
    <head>
        <style>
    #heart {
        position:relative;
        background-color: inherit;
        height: 175px;
        transform: rotate(-45deg);
        width: 100px;
        border-radius: 50px 50px 0 0;
    }
    #heart:before {
        position: absolute;
        width: 175px;
        height: 100px;
        left: 0;
        bottom: 0;
        content: "";
        background-color: inherit;
        border-radius: 0 50px 50px 0;
    }

#heart {
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background:red; left:20%; top:0px;}
  25%  {background:yellow; left:70%; top:0px;}
  50%  {background:orange; left:20%; top:0px;}     
  75%  {background:blue; left:70%; top:0px;}    
  100% {background:red; left:20%; top:0px;}
}
        </style>
    </head>

    <body>

        <div id="heart"></div>
    </body>
</html>

Super. Mógłbyś mi jeszcze powiedzieć jak mogę to zmniejszyć?

Kopiuj
transform: scale(0.25);

Mam coś takiego ale nie wiem gdzie mam to wtrinić?
Dzięki serdecznie!

Kuba

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Riki
RI
Riki
RI
  • Rejestracja:około 5 lat
  • Ostatnio:około 5 lat
  • Postów:40
0

Skalowanie:

Kopiuj
...
    #heart {
        position:relative;
        background-color: inherit;
        height: 175px;
        width: 100px;
        border-radius: 50px 50px 0 0;
    }
    #heart:before {
        position: absolute;
        width: 175px;
        height: 100px;
        left: 0;
        bottom: 0;
        content: "";
        background-color: inherit;
        border-radius: 0 50px 50px 0;
    }

#heart {
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    transform: rotate(-45deg) scale(0.1);
}
...
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto