CSS Shape & Animation

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.

#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

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.

#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

0

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

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

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

0
Riki napisał(a):

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

<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ć?

transform: scale(0.25);

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

Kuba

0

Skalowanie:

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

1 użytkowników online, w tym zalogowanych: 0, gości: 1