DEV Community

Cover image for CSS makes the world go round 🌎
Chris Bongers
Chris Bongers

Posted on • Originally published at

CSS makes the world go round 🌎

On Thursday I came across this really great tweet by Antonia

Guys this is a very easy project if you want to try it 🌎

Can you believe is just an emoji 😍😍

Link: #WomenWhoCode #womenintech #CodeNewbie #DEVCommunity #GirlsWhoCode

— â€ĸ Nanouu â€ĸ đŸŒē | đŸĻ‹ | đŸŒģ â€ĸ (@NanouuSymeon) September 3, 2020

And I was inspired by it, so I wanted to have a look at this!
(Yes, I'm addicted to smileys!)

So today we'll make the world go round with CSS

World round css

It's not as smooth as Antonia's example because the world only has three emoji's ☚ī¸

HTML Structure

Our HTML is the simplest ever.
Only one div!

<div class="world"></div>
Enter fullscreen mode Exit fullscreen mode

CSS spinning world emoji

As for CSS this is where the magic happens!

Let's start my making the body a display flex and center everything with flex.

body {
  background: #333;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
Enter fullscreen mode Exit fullscreen mode

Next up to our div!

.world {
  font-size: 250px;
.world::after {
  content: '🌎';
  animation: world 1s infinite;
Enter fullscreen mode Exit fullscreen mode

We make the font-size really big and set our starting emoji 🌎 on our pseudo after class.

Then we set our animation to be world, for a duration of 1 second and loop forever!

All we need to do now is make the world animation:

@keyframes world {
  33% {
    content: '🌍';
  66% {
    content: '🌏';
Enter fullscreen mode Exit fullscreen mode

There are only two world emoji's left, so we split our animation in two, and set our content!

That's it, CSS can make the world go round!

View this demo on Codepen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (0)