Have you ever encountered a situation where you have no inspiration when writing CSS and cannot produce cool effects? Then you must read this article. Knowing these open source libraries will allow you to create amazing effects and effectively increase your fishing time.
1.CSS Inspiration
URL:
chokcoco.github.io/CSS-Inspira…
CSS Inspiration has a variety of fantastic CSS tutorials, covering many common CSS effects. Display different css attributes or different topics in the form of classification, such as layout, border, pseudo elements, filters, background 3D, etc. These are very important knowledge points in CSS, and they are a good choice whether for learning or actual application in projects.
Of course, you can also use it to consolidate basic knowledge. You can use this project to create some commonly used special effects. You can see that there are hundreds of classic cases for our reference. The key point is to provide source code, which can be used by copying and pasting.
2.Neumorphism
address:
Neumorphism belongs to the neomorphic UI style, which is a relatively new front-end CSS design style. Its style is simple and its basic colors are relatively light, such as off-white, light gray, light blue, etc. We then use shadows to create a concave and convex effect, which looks simple, comfortable and has a 3D effect. Therefore, we can design many beautiful pages through mimicry, and drag the effect control bar to generate css styles in seconds.
3.AnimXYZ
address:
If you are passionate about animation, then animxyz is definitely your best choice. You can use animxyz to combine and blend different animations to create your own highly customizable CSS animations without having to write a single keyframe.
Compared with animate css , its power is that you can manually configure the animation according to your own ideas. The implemented animation code example can be copied and migrated to the project for use.
4.CodePen
The last thing I want to recommend is the one I use most and recommend the most, which is codepen. Codepen is a completely free front-end code hosting service. It has gathered experts from all walks of life and has classic projects from front-end experts around the world for display, allowing you to get a lot of creative inspiration from it.
It can achieve instant preview, and you can even modify online and preview other people's works in real time. It supports a variety of mainstream preprocessors and quickly adds external resource files. Just enter the library name in the input box, and codepen will look for matching css or js libraries from cdn.
Comes with 250 sets of selected project source codes
Source code screenshot
Source code acquisition: Follow the public account "Coder Park" and reply [source code] to get the full set of source code download links