how to make my elements float like clouds?

[EdgyRabbid]

So i am working on updating my website, and melon gave me the idea of making my links float all around the screen. I thought: omg thats generous!


So i tried looking it up: no luck. I am not crafty enough to figure out something.. so im asking for help! Is there some way i could do this, and a guide to that thing for future refence?

Sorry for always asking for help, even after 2 years i am very bad with html

[Knotnu]

Since I'm also a bad coder, all I can say is that I found these that can work if you combine these three together:

Animation of clouds moving

hover underlines on text and images

Animation button video

Hope this helps! And if it doesn't work, I'll try my best to work it out with you 

[Dan Q]

Something like this (Codepen)?

Here's how I made that:

1. The links are in list items in an unordered list in a <nav>.
2. The list gets position: relative (to start a new positioning stack, so its contents are placed relative to it) and overflow: hidden (so "clouds" off the side disappear without making scrollbars)
3. The items in the list get position: absolute and a long animation called "drifting-clouds" assigned, which moves their left edges from 100px "off" the left side to 100px "off" right right side, looping so they come back around again
4. Using &:nth-child, each link gets a different top: (altitude) and animation-delay: (so they don't "clump up")
5. Finally, an li:has(a:hover) { animation-play-state: paused; } stops the clouds drifting when you hover over them, to make clicking easier

It's just a quick thing to show how you might approach the problem, but I hope it's useful!

[EdgyRabbid]

Something like this (Codepen)?

Yes! Exactly this! I simply wanted resources, but you blew it out of the park with this example!

This post right here is what i LOVE about this fourm site! Were always helping each other out and going above and beyond! This is what the web should be, helping each other out and making something beautiful!

Thank you DanQ! You da GOAT!