最近在浏览掘金网站的时候发现新上线的扣子平台，它是一款即刻开发新一代AI Chat Bot的应用编辑平台，可以通过这个平台快速创建各种类型的Chat Bot；不过让笔者更感兴趣的是它首页酷炫的效果。

背 景：   PC项目上线后、用户反馈在笔记本上显示异常，根据反馈发现，笔记本分辨率是2k分辨率，系统推荐用户设置缩放百分比为150%，因此，浏览器也跟系统比例进行了放大，导致根据设计稿开发的部分页面

复杂 web 动画开发 为什么 选择 GSAP GSAP 是一个老牌框架，但也在持续更新，兼容性很好 与框架无关，比如 framer-motion，react spring 只能用于 react；这里

老话说的好：css是你永远学不会的语言。 子辰发现了一个炫酷的3D卡片效果，这样的效果实现起来，你有没有思路呢？

视觉设计的核心就是“让它们看起来好看”，但如果我们没有天生的设计天赋，我们会觉得很难实现。但并不是这样的，对于"变好看"这件事情本身其实是有理可依、有据可循的。而层次结构就是这其中的一部分。 视觉层次

CSS创建文本和图片无限滚动动画效果。标签和图片横向的水平滚动，元素会无缝衔接实现无限循环，首尾两端有渐变蒙层体现出现和消失的过渡效果。滚动时的淡出淡入视觉效果，丰富了网页增添加了动态和交互性。

在原生 APP 中，我们经常会看到那种丝滑又舒适的页面切换动画，比如这样的 Android 里一般称之为共享元素（shareElement）动画，也就是动画前后有一个（或多个）相同的元素，起到前后过渡

在 CSS 中有各式各样的类型值，例如 1rem、10vw、100cqw等等，这些相对值给与了 CSS 强大的适应能力。但有时候，我们还需要知道这些相对值所对应的真实值，也就是px值，比如在移动端，我

本文解析了通过纯 CSS 实现杂志封面折叠效果，拆解之后的实现过程相对就比较清晰了，主要使用了css 3d相关属性。还可以用于各种其他场景，比如卡片翻转、菜单展开等