本文，我们将一起利用纯 CSS，实现如下这么个酷炫的效果： 在一年前，我介绍了 CSS 中非常新奇有趣的一个新特性 -- @scroll-timeline：革命性创新，动画杀手锏 @scroll-ti

前言1.获取系统类型2.监听方法兼容写法3.校正浏览器缩放比例4.监听页面缩放5.初始化页面比例6.全部代码7.使用

在 CSS 规范 Scroll-linked Animations 中，推出了一个划时代的 CSS 功能。也就是 -- The @scroll-timeline at-rule，直译过来就是滚动时间线

10 个 css 代码片段 以下这 10 个常用的 css 代码片段值得收藏，都可以用于平常的业务代码当中。 1. 点点点加载中效果 这是一个兼容性不错的用户体验很棒的点点点加载效果，实现思路如下:

好的前端页面在实现设计图的同时，如果也有极强的与用户交互效果，那么给用户带来的体验是极好的。近期整理了一组相对炫酷前端按钮交互动画，今天分享给大家

View Transition API产生过渡时，会生成一组伪元素，分别代表着状态变换前的图像和状态变换后的图像。

CSS 只有一个作用域，导致样式代码难于维护、可读性也很差，于是我们借助网站的结构对其进行分层抽象出 BEM。

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案！！

1. 基础选择器 1.1. ID选择器 1.2. 类选择器 1.3. 通配符选择器 1.4. 标签选择器 1.5. 属性选择器 2. 组合选择器 2.1. 后代选择器 2.2. 子元素选择器 2.3. 相邻兄弟选择器 2.4. 通用兄弟选择器 2.5. 交集选择器 2.6. 并…