5個新鮮便利的CSS工具
我們已經收集了5個新鮮和方便的CSS開發工具,將簡化您的開發任務,并節省大量的時間。
1. Animo.js
Animo.js is a powerful little tool for managing CSS animations. It includes features like Stack animations, create cross-browser blurring, set callbacks on animation completion. Animo includes the amazing animate.css library by Dan Eden which provides you with nearly 60 beautiful animations from attention seekers to entrances and exits. He has also added a few helper animations to the library.
Source
2. A Handy CSS3 Animation Cheat Sheet
The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.
The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that’s IE 10). Using CSS3 @keyframes, you don’t have to worry about positioning the element to accommodate the animations – it will animate into place.
Source
3. Create CSS3
It lists the properties + allows us to customize the values of each and displays the preview instantly. Multiple rules can be added to the same element and the generated CSS code can be edited as well.
Source
4. Salvattore
There are many different solutions for creating Pinterest-like, dynamic-column layouts. Salvattore is another good one that comes with an important difference: it is not configured in JavaScript but in CSS. It is again a JavaScript-powered solution but doesn’t require any frameworks.
Source
5. nthChild
:nth-child, the powerful CSS selector for selecting elements with a formula, has a great use when styling layouts. If you are not experienced with the usage of this selector, nthMaster, a website focused for this helps a lot. nthMaster presents various usage scenarios of :nth-child simply, visually and with a basic description. These include targeting a specific element, a range, negative range, :nth-of-type usage and more.
Source