前端: 如何更高效的学习Css? 有哪些库值得推荐?

徐小夕
• 阅读 1240

之前有很多朋友问我如何快速学习 css 以及有哪些好用的css库, 最近也抽出时间思考整理了一下, 今天就和大家分享一下我的经验.

如何高效学习Css

之前在工作中也使用 css 做过很多有意思的事情, 比如用 css 画图标, 写轮播图, 写动效, 做布局等等, 但是这些应用的实现都依赖于 htmlcss 基础知识.

根据我自己的学习经验, 我们需要掌握如下基础知识:

  • Css 基本语法结构和属性设置
  • Css 盒模型
  • Css 定位方式
  • Css 布局
  • Css BFC(块级格式上下文)
  • Css 伪类和伪元素
  • Css 媒体查询
  • Css 过渡与动画

掌握了基础知识之后可以多写案例和学习别人的优秀经验, 这里给大家分享一个我刚开始学习前端的网站 https://codeguide.co/. 前端: 如何更高效的学习Css? 有哪些库值得推荐?

这个网站有非常多前端的基础知识和最佳经验, 同时还提供了很多经典代码片段, 供我们学习参考:

前端: 如何更高效的学习Css? 有哪些库值得推荐?

同时学习也离不开书籍, 看经典书籍能让我们更深入的理解语言本身, 这里也给大家分享我之前觉得不错且有深度的 css 书籍:

  • Css世界
  • Css揭秘

接下来和大家分享几个非常不错的 css 库.

好用的css库分享

很多时候我们在实际的工作中很少用到纯 css 类的工具库, 一般都是能手写就尽量手写, 但是涉及到一些复杂的动画交互, 我们用已有的第三方库还是非常高效的, 这里和大家分享几个我之前经常使用的 css 库.

1. hover.css

前端: 如何更高效的学习Css? 有哪些库值得推荐?

开箱即用的鼠标悬停动画, 支持的动画类型有:

  • 2D Transitions(2D过渡)
  • Background Transitions(背景过渡)
  • Icons Transitions(图标过渡)
  • Border Transitions(边框过渡)
  • Shadow and Glow(阴影过渡)
  • Speech Bubbles(气泡效果过渡)
  • Curls (卷积过渡)

如果大家有类似的应用场景, 不妨参考一下.

2. animate.css

前端: 如何更高效的学习Css? 有哪些库值得推荐?

一款跨浏览器的简单便捷的 CSS 动画库, 提供了非常丰富的动画效果, 目前很多开源项目都用到了它, H5-DooringDooringX 也内置了很多它的动画效果. 如果大家有类似的应用场景, 不妨参考一下.

3. Magic

前端: 如何更高效的学习Css? 有哪些库值得推荐?

集成各种特殊动效的 css 动画库, 动画效果非常震憾, 如果大家想做一个酷炫的网站, 不妨参考使用一下这款 css 库.

4. csshake

前端: 如何更高效的学习Css? 有哪些库值得推荐?

一个能够震动和晃动DOM元素的CSS库, 在移动端模仿手机震动, QQ窗口震动, 还是非常有意思的.

5. hint.css

前端: 如何更高效的学习Css? 有哪些库值得推荐?

一个用纯 csshtml 实现的提示库. 体积超级小, 对于一些位置固定的提示场景, 非常有用, 不用担心包体积过大的烦恼~

6. kite

前端: 如何更高效的学习Css? 有哪些库值得推荐?

一个兼容性极好且灵活的布局 css 库. 使用inline-block,基于 OOCSSMindBEMding, 可以帮助我们快速构建组件.

css 实战分享

好啦, 今天的分享就到这啦, 如果文章对你有帮助, 欢迎 点赞 + 评论, 鼓励作者创造更优质的内容~

更多推荐

点赞
收藏
评论区
推荐文章
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
徐小夕 徐小夕
2年前
用css3实现惊艳面试官的背景即背景动画(高级附源码
我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。这篇文章参考《css揭秘》这本书,并作出了自己的总结,希望能让大家更有收获,也强烈推荐大家看看这本书,你值得拥有
helloworld_34035044 helloworld_34035044
11个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
1年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
1年前
Python+Selenium练习篇之5
前面介绍了,XPath,id,class,linktext,partiallinktext,tagname,name七大元素定位方法,本文介绍webdriver支持的最后一个方法:by\_css。css和XPath类似,也需要掌握一些语法,才能写出正确的,完整的css选择表达式。相关脚本代码如下:codingu
Stella981 Stella981
1年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Stella981 Stella981
1年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_