5個新鮮便利的CSS工具

jopen 11年前發布 | 10K 次閱讀 CSS

我們已經收集了5個新鮮和方便的CSS開發工具,將簡化您的開發任務,并節省大量的時間。

1. Animo.js

5個新鮮便利的CSS工具
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

5個新鮮便利的CSS工具
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

5個新鮮便利的CSS工具
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

5個新鮮便利的CSS工具
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

5個新鮮便利的CSS工具
: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 

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!