Share your repls and programming experiences

← Back to all posts
🟦 Satisfying CSS shapes that spin, change color and size, move, and more! 🔵
Bookie0

Satisfying CSS shapes that spin, change color and size, move, and more!

Hey there!

Hope everyone is doing well and staying safe! Here is a HTML CSS webpage which include many different shapes using pure CSS to spin them around, change their color and size, move them, turn into different shapes, and a lot more! You can use them for your sites as decorative elements, loading screens, etc.


Features ✨

  • Clear sections seperating different types of changes:

  • Chevrons to navigate between each section

  • Name of each different shape so you can find out the code

It's also responsive, meaning that you can view it on any device, computer, tablet, phone, etc.


Links 🖇


Code 💻

Check out the code to see how the site was made. I've added many comments to guide you. Here's basically how the CSS works:

Each different section is seperated out in the HTML, and then each different shape is seperated into rows (columns for smaller screens). The columns/row use display: flex; to align them.

There's first the .shape class which represents a single shape. It also uses display: flex; to align the text inside of it. When you hover over it, the opacity is changed with filter: brightness(90%);.

Rotate

The first type of movement is rotate.; transform: rotate(360deg);. This will happen in the :hover selector. With transition: transform 1.5s;, we make this transformation last 1.5 seconds.

The first 3 types (type1, type2, and type3) are basically the same; the comments below can explain what it does.

The only difference between the first 3 shapes is that they have different border radius' with border-radius: 20px; (but 20px is changed).

The next shape using rotate will be using @keyframes for animations.

Clip Path

So clip-path lets you "clip" or crop an element to a basic shape. For the shape type4, we first have the clip-path set to 100%, and with transition: clip-path 1s;, when we hover over the shape, the div will be cropped to a circle of 25% in 1 second.

With type5, we'll be using @keyframes again to make it automatically crop from 100% to 25%, similar to type4.

type6 is about the same as the previous ones, except that we're using different percentages for the clipping to make it more smooth. You can tinker and change the numbers to match your preference.

Finally, the last type using clip-path is more like a real loading animation, where the clip-paths are delayed. I havn't include everything as it's a bit long, so check out style.css for everything.

Scale

With scale, we can easily change the size of an element. For example with transform: scale(2);, we can make an element 2 times bigger (if you want to just make the width or height bigger, you could do transform: scale(2,4); which makes the width 2 times as big and the height 4 times as big).

So for type8, which will also have several different @keyframes to make a real animation look:

type9 is basically the same as type8, but with border-radius: 50%; to make it into a circle, so I won't go over it.

type10 is also similar, but with a less round border-radius.

Finally, type11 is also the same as the previous ones, but:

Background Color

Lastly, we have background-color. This one is pretty simple, you just specify the different background colors in the @keyframes, and it'll automatically change. In the animation, you can change how long you want it to play for, which will then make the changing of the color smoother or rougher, depending on the value.

This is type12:

type13 is the same, except that it's a bit faster by adding more percentage values:

The last shape, type14 will be a loading animation by changing each circle's color one by one:

Responsiveness, scrollbar, and highlight

This webpage is reponsive meaning that you can view it on any type of device; computer, tablet, phone, etc.

So with @media only screen and (max-width: 740px), the following rules will be applied if the device's width is smaller than 740px.

Finaly, there's the scrollbar with the selector ::-webkit-scrollbar as well as the highlight of text with ::selection, you can check those out at the bottom of the style.css.


Closing 🚪

Well, that's about all. Feel free to comment below your thoughts, suggestions, and questions if you have any!

You can copy and use any of the loading animations or remix them to suit your preferences. :)

Have an awesome day!

Bye! 👋

Voters
SeamusDonahue
xXToluwaXx
SilvermoonCat
etstringy
Whippingdot
PixiGem
PYTHORE3605
JWZ6
nbbcsf
maxina
Comments
hotnewtop
SeamusDonahue

good job! these buttons are pretty satisfying!

Bookie0

thanks, glad you like them! :D @SeamusDonahue

Whippingdot

Noice

also yoi the super long post - make a tutorial next time ploise

Bookie0

@Whippingdot

Lol thanks, also yeah this was kinda in the middle between a tutorial and a project/game but ¯_(ツ)_/¯

JWZ6

this is so simple, yet so pog

Bookie0

@JWZ6 lmao thx, wise words! :)

JWZ6

@Bookie0 yup i made an ascii thingy btw with me friend y did i say dat

Bookie0

lol nice @JWZ6

JWZ6
Bookie0

:) @JWZ6

JWZ6
Bookie0

Nice @JWZ6

JWZ6
RayhanADev

oooh pweettty!

Bookie0

@RayhanADev yay thank u (^‿^)

RayhanADev

@Bookie0 no problem!

Bookie0
RayhanADev
ZarmDev

This is nice! Maybe add opacity? Then it get's a bit transparent when you hover. Like maybe opacity: 0.6

Bookie0

@ZarmDev Thanks! I think I already added opacity with filter: brightness(90%); when you hover: :)

ZarmDev

@Bookie0 Ohhhh I see oops

Bookie0

lol np :D @ZarmDev