一直以来我都热衷于使用CSS来制作动效，特别是随着CSS Houdini的到来，能更轻易的帮助我们实现一些优秀的动画效果。但不管怎么样，她在制作动效，特别是创建引人注目的动画有时也非常的棘手。即使你对CSS制作动效非常的了解，但很难避免制作动效带来的高开发成本，也因此，开始探讨Lottie Web来快速帮助我们还原Web动画效果，提高效率，提升效果。不过是哪一种，都需要开发者对其有较深的了解，才能在开发动效的时候不会感到棘手。特别是在一些框架开发体系下（比如React）开发动效，更令大家感到困惑，不过幸运的是，Framer 为大家带来一个开源的React动画库，即 Framer Motion。

开发者基于Framer Motion可以制作出漂亮的动效，而且开发过程非常简单，甚至可以说是傻瓜式开发。这是因为Framer Motion为开发者提供了可用于开发动效的API。这些API都是声明式的，通过props来驱动的。在这篇文章中，我们将仔细看看如何使用Framer Motion帮助我们快速地创建令人敬畏的动效。如果你也对此感兴趣的话，请继续往下阅读。

前段时间在《Lottie Web动效在React中的构建》一文中和大家聊了如何通过lottie-web将AE导出来的JSON文件自动生成动效。在该文中，聊的主要是设计软件Figma、Sketch和AE软件之间如何通过相关的插件完成设计资源的互通，并从AE导出动效相关的JSON文件。这些都是最基本的操作链路，但在使用lottie-web还有相应的API可用来控制Lottie动效。今天这篇文章我们主要来聊聊Lottie Web动效的基本原理。

最近看了一些设计相关的教程，看到几个有关于设计效果相关的专业术语，比如微软的 Fluent设计系统 中的亚克力效果（Acrylic Material），Mac OS的磨砂玻璃效果（Frosted Glass）。另外，记得去年 @Michal Malewicz的《Neumorphism in user interfaces》一文掀起了围绕“Neumorphism”设计风格的讨论，当时一度认为该设计风格将会是2020年的设计趋势，事实上去年并没有以这种设计风格为主流，而且很多人认为“Neumorphism”的UI风格是一种可怕的设计风格。不过，最近在Codepen上看到另一种设计风格，这种风格同样是@Michal Malewicz 提出来，并称之为“ 玻璃变形（Glassmorphism) ” 的UI风格，这种风格已在一些产品中出现，比如三星的一些广告和MKBHD的介绍视频。在设计圈很多设计师提出“玻璃变形（Glassmorphism）”设计风格运用得当，可以起到引人注目的效果。

在A11Y中有一个非常重要的点就是关于Web页面或应用上焦点的管理。焦点的管理涉及到多个部分，比如焦点的顺序，焦点的样式等等。这些看上去细微的地方，对于Web的可访问性是非常的重要，特别是对于重度依赖于键盘操作的用户群体来说更为重要，因为焦点的顺序能更这些用户带来更好的体验，另外焦点的样式也能更好的告诉用户现在所处的位置，能有效指导用户在Web上的导航位置。今天和大家一起聊聊Web中有关于焦点方面的知识，如果您感兴趣的话，欢迎继续往下阅读。

时至今日Web动效已经不是什么新鲜事了，在很多Web页面或Web应用上都有Web动效的身影。承载Web动效的方式也很多种，比如早期的Gif动效，也有人用视频来表示动效，也有使用JavaScript构建动效（比如Canvas，WebGL构建），还有一些JavaScript库构建动效以及CSS构建Web动效等。不过，近几年更多的是在探讨如何快速生产，并且还原动效。针对于这方面，在业内Lottie动效算是流行的一种，也是口碑很好的一种。今天我们就来看看，如何在React中借助Lottie的能力，快速还原Web动效。

2020年底@Una Kravets在CDS（Chrome Developer Summit 2020）分享了使用Houdini扩展CSS的话题，同时推出了 Houdini.how。让我们可以使用CSS Houdini的Paint API进行创作，并通过 CSS Paint Polyfill 让不支持CSS Houdini的Paint API的现代浏览器也能运行Paint API扩展的CSS能力。你或许和我一样，对此感到好奇是吧？如果是的话，请继续往下阅读。

过去一年来花了不少时间来研究CSS自定义属性相关的特性，而且在站上也发了多篇有关于CSS自定义属性相关的教程，其中有关于CSS自定义属性，也有涉猎CSS Houdini自定义属性相关的。但我想很多同学除了希望了解CSS自定义属性理论相关的知识之外还更想了解CSS自定义属性能做什么吧。在这篇文章中，我将整理一些有关于CSS自定义属性在实际开发中能做什么，并会在文章中提供相应的一些使用实际。希望能通过具体的实例帮助大家更好的理解和使用CSS自定义属性。

在20年岁末有幸和一群优秀大学生在一起聊CSS相关的话题，感到非常的荣幸！在此非常感谢平台（阿里巴巴集团.前端练习生计划）给我这样的机会，同时也要非常感谢好友 裕波，墨苒对我的鼓励和支持。在结束直播的时候，说过后面要整理一篇文字版本，由于个人新转团队（互动团队转到 F(x) Team团队），加上自己太懒，所以今天才开始整理文字版本。所幸能在岁末完成，还算是一种补救。希望接下来的内容，对于新接触CSS或对CSS感兴趣的同学有所帮助，更希望有更多的同学能参与阿里巴巴集团练习生计划的学习，并有所获。

很多Web开发者更喜欢将 *CSS自定义属性 称之为 CSS变量。在2020年中社区中有关于CSS自定义属性的讨论到处可见，小站也有很多关于CSS自定义属性的相关教程，而且在很多Web应用中也可以看到CSS自定义属性的身影。虽然如此，但有很多开发者对CSS自定义属性了解的不多，甚至说不怎么理解，也用不好CSS自定义属性。这篇文章和以往介绍CSS自定义属性的文章有所不同，我从不同的角度来阐述CSS自定义属性，主要是希望这篇文章能让Web开发者更好地理解CSS自定义属性，以及如何更好的使用该属性。如果你对该话题感兴趣的话，请继续往下阅读。

告诉大家一个好消息，The Screen Fold API 已经进入 W3C规范的ED阶段 了。这个规范主要可以帮助我们以后为使用折叠屏设备用户提供一个更好的用户体验，即 为折叠屏设备在不同的折叠状态（“姿势”）提供相应的布局。这个规范主要由 三星（Samsung） 的 @Diego González 和 英特尔（Intel Corporation） 的 @Kenneth Rohde Christiansen 一起起草的，虽然目前只是处于规范的 ED 阶段，但这为我们今后在折叠屏设备上实现Web布局有了一定的理论依据。也许在未来，这里面的一些属性或API还会有所变动，但这并不影响我们去探究或参与讨论。或许说不定明年，或者后年你就在实际业务中需要面对折叠屏幕的适配需求。如果你感兴趣的话请继续往下阅读。