Skip to content
loading...
Cover image for CSS Animation: The King and the Fly

CSS Animation: The King and the Fly

alvaromontoro profile image Alvaro Montoro twitter logo github logo Updated on ・1 min read  

A CSS animation of a king and an annoying fly.

You can turn on/off the animations (off by default). If you turn them on, the sound of the fan working like crazy will make for the buzzing of the fly πŸ˜‹πŸ˜³

I was thinking about adding some candelabra and maybe a couple of guards/knights (one done, one to go). Any suggestions?

twitter logo DISCUSS (9)
Discussion
markdown guide
 

Awesome animation. Looks like you're using a lot of clip-paths:

.beard {
  width: 120%;
  height: 70%;
  border-radius: 100%;
  background: red;
  background: linear-gradient(to bottom, white 15%, #e8e8e8 85%);
  top: 70%;
  left: -10%;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 70% 92%, 65% 98%, 60% 90%, 55% 100%, 50% 85%, 45% 98%, 40% 88%, 35% 98%, 30% 90%, 25% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 70% 92%, 65% 98%, 60% 90%, 55% 100%, 50% 85%, 45% 98%, 40% 88%, 35% 98%, 30% 90%, 25% 100%, 0% 100%);
}

Are you using a tool to create these clip-paths or manually creating them?

 

These ones are fairly simple, so I created them manually. If I need more complex ones, I may use tools like GIMP to trace and export the path (probably not ideal, but it does the trick)

 
 
Classic DEV Post from Jul 26 '19

🎩 JavaScript Enhanced Scss mixins! 🎩 concepts explained

In the next post we are going to explore CSS @apply to supercharge what we talk about here....

Alvaro Montoro profile image
Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Active moderator in Stack Overflow en Español. Husband, Father, Longhorn 🀘