This is the third part in a three-part series about CSS illustrations and animations. In this last part, we are going to build an animated lighthou...
For further actions, you may consider blocking this person and/or reporting abuse
Thanks Agathe, I really enjoyed this series.
CSS animation is one of my weakness so this helped me a lot in gaining more understanding about it. I still have a lot to learn but that's the exciting part.:D
Hope to see more of your posts.
Cheers!
This post is just awesome! Although I had some issues with z-index and some elements just didn't want to show up cause of "bottom: 0;" in CodePen(Any guess why?). At least I made it in my own way of sort and I learned a hell lot out of these 3 posts.
Thank you and keep up the good work!
Not sure... if you add the link to your pen, I'd be happy to have a look
Here is the pen: "codepen.io/aggelow/pen/yxPBjW".
oh dear! that's because there's no size or position for the 'lighthouse-group' element. This is 100% my fault, I forgot this step in the tutorial (I've now amended the post). If you add the below CSS, and use the bottom property again, your issues should be fixed
.lighthouse-group {
width: 50%;
height: 100%;
bottom: 0;
left: 0;
z-index: 2;
}
Awesome post! Thanks for this!
Another example of this
hyperoffice.com/microsoft/
Can someone explain why we assign $size: random(4)+px; before starting the
.star:nth-of-type(#{$i}) {
Agathe, these were a blast to run through this morning! They've sparked my creative motor!
Yay! I hope you had fun :)
thank you for the amazing tutorial. you can have a look at my work following your steps
0602379da2154291bc5e785b06d6562a.p...
Wow! I'm just speechless. What an awesome guide. Thanks a ton!
Thank you for that really good explain itself series. This really help me a lot. Best wishes.