This content originally appeared on DEV Community and was authored by Roden
I want to introduce you to my 6 animated icons. It took me a little over a week to create them.
You know, I often use icons in my projects, but it always seemed to me that they lack dynamics, and that they sometimes look very boring. I always wanted those elements that are displayed on the icon to be animated, and that they can be edited as you need. But I could not find anything interesting, which later prompted me to create my own icons created using html and css.
You can edit these icons as you like: change the size of all the elements, edit the colors, create your own animation for them, and change the location of any element.
To insert an icon on your site, simply copy the necessary sections of the pug and scss code (html and css), which are marked with the corresponding comments. Also, don't forget about the @keyframes required for the animation, which are located at the very bottom of the code.
I hope they will benefit you in your future projects.
I would be very grateful if you appreciate this work.
P.S.
To reset the styles, I use reset.css with the addition of the box-sizing: border-box; property, but if you do not want to use it, you can simply insert at the beginning of the styles:
- { padding: 0; margin: 0; box-sizing: border-box; }
Also keep in mind that the project uses variables and @extend. So, if you don't want to worry about them, just compile them into styles from scss to css. This can be done in CodePen.
The appearance of the icons I took from the Internet.
This content originally appeared on DEV Community and was authored by Roden
Roden | Sciencx (2021-05-21T17:28:49+00:00) CodePen – CSS Icons (Animation). Retrieved from https://www.scien.cx/2021/05/21/codepen-css-icons-animation/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.