🟦 Satisfying CSS shapes that spin, change color and size, move, and more! 🔵
Satisfying CSS shapes that spin, change color and size, move, and more!
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.
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.
- Site ==> https://CSS-Shapes.bookie0.repl.co
- Code ==> https://replit.com/@Bookie0/CSS-Shapes?v=1
- Post ==> https://replit.com/talk/share/Satisfying-CSS-shapes-that-spin-change-color-and-size-move-and-more/139744
Check out the code to see how the site was made. I've added many comments to guide you. Here's basically how the
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
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
The first type of movement is
transform: rotate(360deg);. This will happen in the
:hover selector. With
transition: transform 1.5s;, we make this transformation last
The first 3 types (
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 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.
type5, we'll be using
@keyframes again to make it automatically crop from
25%, similar to
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, 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).
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
type11 is also the same as the previous ones, but:
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.
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.
@media only screen and (max-width: 740px), the following rules will be applied if the device's width is smaller than
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
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. :)