Project Miguel
October 17, 2018
Visit this project 👉This is my second pure CSS project, hedgehog Miguel. I created this project to have better understanding for animation, SVG and to test how much I can create and design with pure CSS.
How to create spines
I used font-awesome for spines. I applied two certificate icons for head and body using <i>
tag.
How to create face
Those ears, eyes and nose are empty DOM element and set the size and color in CSS. I created paired items, ears and eyes, using unordered list so that it's going to easy to style them together. I used SVG to create a cute little smile.
How to create the moving feet
Those tootsies are all <div>
s. The reason I didn't use list is that I could add different animation for each of them and I could enjoy the different moves.
The original positions are set used transform: rotate(Xdeg);
. Then I added animation for 5000 millisecond. Within the 5 second, those little feet moves back and forth because I change the transform: rotate(Xdeg)
in every 20% of the time.
Technology Used
- HTML
- CSS
- CSS animation