CSS3动画设计 - Loader特效·进阶篇

特效一览

🌊 波浪特效:

🕙 撞钟特效:

⏳ 沙漏特效:

🏃 追逐特效:

CSS3动画设计 - Loader特效基础篇

特效一览

声音波纹

弹性缩放

旋转加载

渐变点:

翻转纸片

CSS3动画设计 - 按钮特效

特效一览

滑箱

果冻

脉冲

闪光

气泡

CSS3动画设计 - 输入框特效

特效一览

划线动态

动态边框

CSS3动画设计 - 字体特效

特效一览

划线动态

背景高亮

色块进出

[译]逐步替换Scss

翻译说明

这是一篇介绍现代 css 核心特性的文章,并且借助 sass 进行横向对比,充分体现了 css 作为一门设计语言的快速发展以及新特性为我们开发者带来的强大生产力。

第一次尝试翻译技术文,为了让文章更通俗易懂,很多地方结合了文章本意和自己的说话风格。另外,时间有限水平有限,难免有些失误或者翻译不恰当的地方,欢迎指出讨论。

英文原文地址https://cathydutton.co.uk/posts/why-i-stopped-using-sass/

Flex快速上手

Flex之于 CSS3 就如Promise之于 ES6,都解决了开发者的痛点问题,大大提高了生产力。借助Flex,可以轻松实现栅栏布局水平/垂直居中自定义排列方向和顺序等等需求。

你了解css3的nth-child吗

:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素,借助这个特性,可以实现选择第偶数次序的子元素、选择一定范围内的子元素等“批量选择操作”。

而它比较难理解的地方是参数表达式中n的含义,以及如何进行数学运算,这也是面试中考察的难点。

2018年个人博客UI设计总结

不知道你是否也有想过完全用自己的代码实现自己的个人博客?定制专属 UI、定制专属逻辑、在信息爆炸的时代真正地沉淀下属于自己的东西。我也曾经历了同样的纠结,最终下定决心做了自己的个人博客。虽然过程曲折,但一路风景很好、小路很多。看着被自己全新改版的网站,心里只有满足感,也笃定了知识分享和结识更多好友的初衷。就以此篇记录下网站 UI 改版的过程和感受吧,缅怀过去,勿忘初心。

CSS3盒模型:border-box

box-sizing可以声明计算元素高宽的 CSS 盒模型。它有content-boxborder-boxinherit三种取值。其中border-box是 css3 新增,也是主流 UI 框架的全局默认属性。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×