1. 首页
  2. 前端基础

你未必知道的CSS知识点(第二季)

本文的每一条,都是我曾经发过的掘金沸点,其中有很多条超过了百赞(窃喜)。

鉴于时不时有童鞋翻我以前的沸点,因此,本系列收集了个人目前发过的所有CSS知识点动图,以便阅读。

两个月前,曾发过一篇《你未必知道的49个CSS知识点》,已有3000多赞,这里,老姚真心谢谢大家的支持。

本篇是第二季。与前一篇相比,每个动图都做了加速处理,看起来更流畅一些。

另外,本篇还简单地做了归类,动画特效相对多一些。

需要说明的是,创建复杂特效非我本意,其中大部分都是一两个div就能实现的效果。主要目的是演示渐变、阴影、变换、动画等知识的综合应用。

大部分提供了在线演示链接,祝你阅读愉快!

知识点篇

01.?CSS计数器的使用

你未必知道的CSS知识点(第二季)

演示地址:codepen

02.?文本缩进,块级用text-indent,内联用margin-left

你未必知道的CSS知识点(第二季)

03.?美化表格常用技巧。等比、定宽、错色等

你未必知道的CSS知识点(第二季)

演示地址:codepen

04.?滚动条样式美化

你未必知道的CSS知识点(第二季)

05.?使用文本对齐属性值justify,实现类似弹性布局的space-between效果

你未必知道的CSS知识点(第二季)

06.?使用selection选择器自定义文本选区的高亮样式

你未必知道的CSS知识点(第二季)

07.?grid-template设置网格模板,实现三列两行布局

你未必知道的CSS知识点(第二季)

08.?grid-gap设置网格间隙,包括行和列

你未必知道的CSS知识点(第二季)

09.?grid布局,使用fr单位实现等比例分配空间。fr是分数(fraction)的缩写

你未必知道的CSS知识点(第二季)

10.?grid布局使用repeat函数,可以少写些代码

你未必知道的CSS知识点(第二季)

11.?focus-within是为数不多的一个,可以由子操作父选择器

你未必知道的CSS知识点(第二季)

演示地址:codepen

12.♐容易被忽视的target选择器

你未必知道的CSS知识点(第二季)

特效原理篇

13.⚽使用变换实现简单复合运动

你未必知道的CSS知识点(第二季)

14.?看见彩虹,吃定彩虹

你未必知道的CSS知识点(第二季)

演示地址:codepen

15.?人脸识别时用到的扫描图,之前我司的一个需求

你未必知道的CSS知识点(第二季)

演示地址:codepen

16.?立体感按钮

你未必知道的CSS知识点(第二季)

演示地址:codepen

17.?实现一个混沌动态背景

你未必知道的CSS知识点(第二季)

演示地址:codepen

18.?环绕椭圆轨道旋转。平移运动与圆周运动复合就能做到

你未必知道的CSS知识点(第二季)

演示地址:codepen

19.?只用background就能实现简单滤镜效果

你未必知道的CSS知识点(第二季)

20.?蛇形边框特效原理

你未必知道的CSS知识点(第二季)

演示地址:codepen

21.?让你的女朋友动起来

你未必知道的CSS知识点(第二季)

演示地址:codepen

22.?一个div,实现天狗吃月亮

你未必知道的CSS知识点(第二季)

演示地址:codepen

23.?更简单的方案,实现天狗吃月亮

你未必知道的CSS知识点(第二季)

演示地址:codepen

24.?画个土星,像不像三分样

你未必知道的CSS知识点(第二季)

演示地址1:codepen

演示地址2:codepen

25.?使用渐变,一个div画Chrome的logo

你未必知道的CSS知识点(第二季)

演示地址:codepen

26.?一个div简单画铜钱

你未必知道的CSS知识点(第二季)

27.?切牌特效原理

你未必知道的CSS知识点(第二季)

演示地址:codepen

28.✂给clip-path应用动画

你未必知道的CSS知识点(第二季)

演示地址:codepen

工具篇

29.?vscode里是可以使用Emmet语法的,敲tab键结束命令,^表示返回上一层级

你未必知道的CSS知识点(第二季)

语法说明

30.⛲查看页面布局小技巧,觉得很好用

书签完整代码

希望有所帮助。

也欢迎阅读本人的《JS正则迷你书》

本文完。

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:你未必知道的CSS知识点(第二季)

链接:https://www.javascriptc.com/980.html

原文链接:https://juejin.im/post/5d9ec8b0518825651b1dffa3

« Js中文网周刊第41、42期
1.5万字概括ES6全部特性(看图就能记下,值得收藏)»
Flutter 中文教程资源

相关推荐

QR code