Hej,
to mój pierwszy tego typu projekt i zabawa z pozycjami w CSS i animacją. Poniżej link:
http://codepen.io/annadrybulska/full/mABmgJ/
niestety jeśli tylko zmienicie widok na debug czy jakikolwiek inny BB8 ulega rozczłonowaniu :(
co zrobiłam źle...
proszę o pomoc w zrozumieniu i jakąś wskazówkę :)
dziękuję serdecznie
1
1
Fajne! Gdyby jeszcze głowa ruszała się po tułowiu. Ogólnie rozwiązanie jest spoko. Dodałbym kilka elementów jako :after, :before. Ale tak też może być. :)
0
:after, :before? tzn, proszę przybliż mi Twój pomysł, dopiero się uczę, może dam radę zaimplementować :)
1
Całkiem ładne ;)
:after :before - poczytaj o pseudoelementach
Przyczepię się do obracającego się wraz z "podwoziem" odbicia światła ;)
0
Zamiast tworzyć 3 dodatkowych tagów, można to zrobić jednym. Przykład z innej mojej odpowiedzi: http://jsbin.com/gezijedaza/1/edit?html,css,output
Główną klasę np .test dajemy jako pozycję relatywną. Przykład:
<div class="text"></div>
.test { position: relative; height: 500px; width: 500px; background-color: #fff; }
.test:before { content: ''; position: absolute; top: 0px; left: 0px; width: 20px; height: 20px; background-color: #000; border-radius: 0 0 50px 0; }
.test:after { content: ''; position: absolute; bottom: 0px; right: 0px; width: 20px; height: 20px; background-color: #f00; border-radius: 50px 0 0 0; }
Zobacz co ten kod zrobi(mam nadzieję, że błędu nie zrobiłem. Kod pisany na szybko.)
1
...może mogę nałożyć cień na 'podwozie', tak by był nieruchomy dzięki temu... - Anna Drybulska
Nie, jeżeli zaczniesz animować rodzica, wszystko w środku też będzie się poruszało względem rodzica.
Żeby zrobić odbicie które nie będzie się obracało powinnaś utworzyć osobny element, wyżej niż to co animujesz, bądź przesunąć go na wierzch z użyciem z-index
warstwa z głową
warstwa z odbiciem
animowane podwozie