首页 > 其他分享 >Web 开发中 20 个很有用的 CSS 库

Web 开发中 20 个很有用的 CSS 库

时间:2023-04-03 23:31:29浏览次数:55  
标签:CSS3 Web 20 动画 CSS 使用 css 开发者


在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性。每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发。像CSS 库,框架,应用这样的工具能够为开发者做很多事,而且可以使开发者创造出创新立异的WEB应用。

 

在这篇文件章中我们找到了一系列对开发者有用的CSS库,它们能帮助开发者在一定的期限内取得有创造性和创新性的成果。我们希望这个列表能有助于您的开发并为您提供方便。尽情享受吧!

 




1. Kite

Web 开发中 20 个很有用的 CSS 库_css

Kite是一个灵活的布局助手CSS库。Kite使用`inline-block`而不是最新的CSS语法。它注重实际,易于理解且容易使用。Kite用 法与flexbox相似:justify-content,等等。你可以很轻松地创建复杂的模块。Kite是基于OOCSS 与 MindBEMding,它可以帮助您快速构建自己的组件。Kite支持几乎所有浏览器,它属于MIT许可。


 

2. DynCSS

Web 开发中 20 个很有用的 CSS 库_css_02

DynCSS 将您的CSS解析成-dyn-(attribute)规则。这些规则是模拟浏览器事件(如滚动和缩放)的javascript表达式。其结果会应用到上面 指出的CSS属性。你可以将任何CSS属性设置为动态--前提是它对于jQuery的css()方法是可写的。你可以通过附加-dyn-前缀并指定一个引 用的javascript表达式来实现。


 


 


3. Progressjs

Web 开发中 20 个很有用的 CSS 库_ViewUI_03

ProgressJs 是一个 JavaScript 和CSS3库,可以帮助开发者创建和管理页面上所有元素的进度。你可以设计自己的进度条模板并且可以轻松自定义它。你也可以用ProgressJs 来为用户显示内容加载(图片,视频等)的进度。它可以用在textbox,textarea 甚至整个body上。


 

4. Hover.CSS

Web 开发中 20 个很有用的 CSS 库_javascript_04

Hover.CSS 是一个有用的CSS3悬停效果集合,可用于动作调用,按钮,商标,特性图片等。 自定或直接应用到你自己的元素上都非常的简单。 hover.css可以用多种方式来使用; 可以复制粘贴你喜欢的效果到你自己的样式表里,也可以引用样式表。然后只需向你想要的元素需添加对应效果的class名称即可。如果你只打算使用一个或几 个效果,最佳实践是复制粘贴一个效果。


 


 




5. Spinkit

Web 开发中 20 个很有用的 CSS 库_ViewUI_05

Spin kit是一个酷炫的加载动画CSS集合。 Spinkit使用CSS动画来创建吸引人的易于自定义的动画。该集合目标不是提供所有浏览器的解决方案--如果你需要支持哪些还没实现CSS动画属性 (像是IE9及之前的版本)的浏览器,你需要检测下这些动画属性并实现一个变通方案。

 

6. Magic CSS3 Animation

Web 开发中 20 个很有用的 CSS 库_CSS_06

Magic CSS3 Animations 是一个特殊效果的CSS3动画库,你可以免费用于你的web项目。简单的引用CSS样式:magic.css或精简版magic.min.css即可。

 


 




7.Bounce.js

Web 开发中 20 个很有用的 CSS 库_ViewUI_07

Bounce.js是一个用来生成不错的CSS3驱动关键帧动画的工具。用于生成动态动画的JS库是在该工具中投入使用。简单地添加一个组件,选择预设,然后你就会得到一个短URL地址或者导出到CSS。

 

8. ImaCSS

Web 开发中 20 个很有用的 CSS 库_css_08

Imacss是用来将图像文件转换为数据地址的库和应用。该地址可以用来插入到CSS文件中作为背景图片。本质上来讲,它能让你减少所有你对你设计的图片(如图标等)的HTTP请求,并使之能够单个调用。

 


 




9.Buttons

Web 开发中 20 个很有用的 CSS 库_ViewUI_09


Buttons是一个可以创建高度自定义、灵活和现代感十足的web按钮的CSS库。该库由Sass+Compass构建,支持正方形、圆角矩形或 者圆形的按钮,并且可选是否扁平以及其他自定义的效果(如发光)。所使用到的尺寸、颜色、效果和字体可以通过变量的帮助进行修改,并且可以非常容易的进行 扩展。

 

10.OdoMeter

Web 开发中 20 个很有用的 CSS 库_CSS_10


OdeMeter是一个用来创建一些我们比较熟悉的如“汽车里程显示,机场信息板或角子机”等效果或者面板的JavaScript-CSS库。该库 是独立式+轻量级(3kb)的,使用CSS为效果进行转换,所以效率极高(当然也有回退设置)。它简单地将一个给定的元素转换到另一个具有单行函数的预定 义的值。

 


 

 




11. Single Element CSS Spinner

Web 开发中 20 个很有用的 CSS 库_javascript_11

Single Element CSS Spinners是一个CSS螺旋动画加载的集合。每个旋转包含一个使用‘loader’ class的div,其文本内容为‘Loading…’。文本是为屏幕阅读器使用的且可用作老浏览器的后退的状态。


 

12. Ani.js

Web 开发中 20 个很有用的 CSS 库_javascript_12

AniJS是一个CSS动画的声明处理库,它能够使开发更便利且能提高开发速度。它文档完善且易于上手。


 


 




13. Beautons

Web 开发中 20 个很有用的 CSS 库_CSS_13

Beautons是一个用来创建漂亮、简洁按钮的易用库。你可以应用各种样式、函数已经其他的更多内容到按键上,包括改变它们的大小,设置它们的可用与否以及更多设置。

 

14. Saffron

Web 开发中 20 个很有用的 CSS 库_CSS_14

Saffron是一系列Sass混合器和助手集,能够使添加CSS3的动画和过渡非常简单。只需要包括一个mixin在SASS声明中,然后使用变量和混合参数设置一些配置。使用Saffron,你能够完全控制动画和过渡的行为。

 


 




15. CSS Shakes

Web 开发中 20 个很有用的 CSS 库_移动开发_15

这是一个能够震动和晃动‘DOM’的CSS类集合。

 

16. Typebase.css

Web 开发中 20 个很有用的 CSS 库_移动开发_16

Typebase.css是个最小化的、可定制的字体样式表。它有less和SASS版本,所以能够很容易地修改融入现代的Web项目。它提供了所有排版 所必要的基础工具且不需添加其他任何设计内容。它被创建用来完成项目发展和成长期时的修改,能和normalize.css很好的工作。

 


 




17. Sassline

Web 开发中 20 个很有用的 CSS 库_ViewUI_17

在web上使用Sass & rems设置文本到基线网格。Sassline可以用在博客、prototyping以及其他Web项目。它有建议的基础字体样式和混合比例已达到基线网格的良好配合。为每个断点选择一个modular-scale,其运行响应将会更好。


 

18. TypeSettings

Web 开发中 20 个很有用的 CSS 库_移动开发_18

一个Sass工具包,基于modular scale有Ems风格,纵向风格,响应比基于headlines。


 


 




19. Type Rendering Mix

Web 开发中 20 个很有用的 CSS 库_css_19

Type Rendering Mix是个小型的JavaScript库,它允许只有使用核心文本时(在iOS和OS X上)才应用样式,在实现更一致的渲染同时保持高精度原态。


 

20. Hint.css

Web 开发中 20 个很有用的 CSS 库_css_20

Hint.css是一个使用SASS构建只使用CSS和HTML的提示库。该库使用数据属性、内容属性、伪元素以及CSS3转换。提示框简洁漂亮,有箭头且可放置在父元素的任何一边。


 


 


标签:CSS3,Web,20,动画,CSS,使用,css,开发者
From: https://blog.51cto.com/u_8895844/6167734

相关文章

  • 力扣26-2023.4.3
    力扣26-2023.4.3问题26.删除有序数组中的重复项方法思路:遍历数组,若后一个和前一个相同,则继续下一个;若后一个与前一个不同,则直接赋值。C++程序:#include<iostream>#include<vector>usingnamespacestd;intremoveDuplicates(vector<int>&nums){/*......
  • AHOI2023 游记
    联赛输麻了,目标是翻到A/C队之外最高分。(Failed)Day0到达合肥最高城——合肥一中!太美丽了合一。诶呀这不是合肥一中学生宿舍吗,还是看看远处的考场吧家人们。试机。捏麻麻滴这个空格怎么嗯不动啊。没事省选寄了就怪它。晚上睡得蛮香。Day1早餐本来夹了炒面,结果捏麻麻滴......
  • 2023省选爆炸记
    day1考前早上8点之前就到了考场,考前吴老师简单交代了几句,大家一起合了个影,就进考场了。考中第一题就一个普及组难度题,随便打一打,半个小时就写完了。接下来的两个小时,先想了很久的T3,后来完全没有进度,就开始想T2,推着推着推出了关于选点的性质,发现正解好像并不......
  • Webgoat学习笔记
    Webgoat学习笔记Webgoat分为简单版和开发版,具体版本及安装方法详见:https://github.com/WebGoat/WebGoat本机环境为:Windows+Tomcat,故下载war包,自动解压缩进行部署。war下载地址:https://github.com/WebGoat/WebGoat/releases/    参考链接:Webgoat学习笔记:http://www.tui......
  • nginxWebUI--一款更好的管理nginx的软件
    背景博主之前搭建了一套k8s系统用来管理开发中常用的软件,以及项目的快速部署。但是在使用的过程中有个麻烦的问题是在于,k8s暴露出来的服务的端口号是限定范围内随机的。所以在我们访问部分服务的时候需要不得已的带上一些端口号,这样有点太麻烦了。能不能简单一点,正好我手上有个域......
  • java学习日记20230404-String类
    String类String对象用于保存字符串,也就是一组字符序列;字符串常量对象使用双引号包括起来的字符序列字符串的字符使用unicode字符编码,一个字符(不区分字母还是汉字)占用两个字节String常用的构造器:newString();newString(Stringoriginal);newString(char[]a);newString(char[]......
  • Nginx web服务和虚拟web站点
    Nginxweb服务和虚拟web站点NginxNginx("enginex")是一个轻量级、高性能的WEB服务器软件。安装nginx依赖包[root@web01~]#yuminstall-ygccgcc-c++autoconfautomakezlibzlib-developensslopenssl-develpcrepcre-devel上传软件包并解压winscp传压缩包到linux;或者下......
  • C/C++快递自提柜流程模拟系统[2023-04-03]
    C/C++快递自提柜流程模拟系统[2023-04-03]普通用户功能包括:普通用户分为老用户和新用户,新用户需要注册再登录,老用户直接注册并登录,登录时用户名和密码都输入正确才可进入用户界面。进入系统后,用户按照快递单号可以查询订单的所有物流信息:订单编号,快递单号(公司),快递的状态(已出库......
  • 使用 Lambda Web Adapter 在 Lambda 上 构建 web 应用
    背景介绍AmazonLambda可结合AmazonAPIGateway或ApplicationLoadBalancer,使您无需提前启动或管理服务器即可运行基于restfulAPI的应用程序。此时,Lambda将以JSON格式的字符串接收http事件,并将其转换为对象,它将事件对象以及上下文传递给Lambda函数。而对于已经开......
  • 小丑的2023省选游寄
    因为考前没停课啥的所以直接开始。day1开题看T1,看到部分分感觉\(n^2\)能拿\(50\)分,比较多,结果刚动笔发现差分瞎搞就能AC,立马过掉,然而文件比对出锅,就是因为格式不同,害得我一直磨蹭到了9:00看T2,一开始没读懂题,想了半天都不知道样例为啥只有两种,于是先看T3。我一周不到一次......