Before many friends asked me how to quickly learn CSS and what are the CSS libraries to use, recently also took time to think about sorting out, today I would like to share my experience with you.

How to learn Css effectively

Before in the work also used CSS to do a lot of interesting things, such as using CSS to draw ICONS, write round play graph, write dynamic effect, do layout and so on, but the implementation of these applications rely on HTML and CSS basic knowledge.

According to my own learning experience, we need to master the following basic knowledge:

  • Basic syntax structure and property Settings of the Css
  • Css box model
  • Css Positioning
  • Css layout
  • Css BFC(Block-level Format Context)
  • Css pseudo-classes and pseudo-elements
  • Css Media Query
  • Css transitions and animations

After mastering the basic knowledge, you can write more cases and learn from others’ excellent experience. Here I share a website where I just started to learn the front endcodeguide.co/.

This site has a lot of front-end basics and best practices, as well as a lot of classic code snippets for us to learn from:

At the same time, learning is also inseparable from books, reading classic books can let us have a deeper understanding of the language itself, here is also to share with you my previous good and in-depth CSS books:

  • Css world
  • The Css revelation

I’m going to share with you some very nice CSS libraries.

Easy to use CSS library to share

Most of the time we rarely use pure CSS class tool library in the actual work, are generally skilled hand writing as far as possible handwritten, but involving some complex animation interaction, we use the existing third-party library is very efficient, here and we share a few CSS libraries I often use before.

1. hover.css

Out of the box hover animation, supported animation types are:

  • 2D Transitions
  • Background Transitions
  • From Icons Transitions
  • Border Transitions
  • Shadow and Glow
  • Speech Bubbles
  • Abstract: Convolution transition

If you have a similar application scenario, may wish to refer to it.

2. animate.css

A simple, easy-to-use CSS animation library that provides rich animation effects across browsers and is used in many open source projects, including h5-Dooring and DooringX. If you have a similar application scenario, may wish to refer to it.

3. Magic

Integrate all kinds of special effects of CSS animation library, animation effect is very shocking, if you want to do a cool website, may wish to refer to the use of this CSS library.

4. csshake

A CSS library that can vibrate and shake DOM elements, imitating mobile phone vibration, QQ window vibration, or very interesting.

5. hint.css

A hint library implemented with pure CSS and HTML. Super small size, for some fixed location of the prompt scene, very useful, do not worry about the package size too big trouble ~

6. kite

An extremely compatible and flexible layout CSS library. Using inline-block, based on OOCSS and MindBEMding, can help us build components quickly.

CSS Combat Sharing

  • Skillfully use CSS rounded corners to achieve some interesting loading animation
  • Easy to create interesting bug art with pure CSS3.
  • How to use CSS3 to achieve a class live queue animation
  • “CSS” using pseudo-elements to achieve super useful icon library (attached source code)
  • Css3 Combat summary (attached source code)
  • Css3 to achieve stunning background of the interviewer background animation (advanced attached source code)
  • “Front-end combat summary” the use of pure CSS to achieve the site skin and focus map switching animation

Ok, that’s all for today’s sharing, if the article is helpful to you, welcome to like + comment, encourage the author to create better content ~

More recommended

  • How to build building blocks to quickly develop H5 pages?
  • React loading animation library developed from scratch
  • Develop a lightweight sliding verification code plug-in from scratch
  • How to design a visual platform component store?
  • Build engine from zero design visualization large screen
  • Build desktop visual editor Dooring from zero using Electron
  • (low code) Visual construction platform data source design analysis
  • Build a PC page editor pc-dooring from scratch