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