CSS3 技术拓展学习笔记
一、SVG 基础与动画
1. SVG 是什么
SVG（Scalable Vector Graphics） 是一种基于 XML 的矢量图形标准，由 W3C 制定。
核心特点：
- ✅ 无损缩放：放大缩小始终清晰
- ✅ 文件体积小：适合网络与高分辨率设备
- ✅ 可编辑：可直接修改 SVG 代码
- ✅ 可交互：支持 CSS / JavaScript 控制
- ✅ 兼容性好：主流浏览器原生支持
常用资源：
- Iconfont：https://www.iconfont.cn/
- Undraw：https://undraw.co/
2. SVG 组成结构
<svg>：SVG 根元素，SVG 图标必须包裹在该标签中<path>：路径元素- 使用
d属性定义路径指令 - 常见指令：
M：移动画笔到指定坐标Z：闭合路径
- 使用
3.SVG 图标常见CSS属性
二、clip-path 裁剪
clip-path 用于裁剪元素的可视区域，可创建复杂几何形状。使元素仅显示被裁剪区域内的部分。
css
clip-path: circle(50% at 50% 50%);
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);可视化工具：
📌 使用建议：
- 常配合
hover/transition - 移动端注意性能开销
三、CSS 滤镜 filter
filter 用于 当前元素及其子元素本身 的实时图像处理，无需修改原始素材。
| 滤镜函数 | 作用 | 示例 |
|---|---|---|
| blur() | 高斯模糊 | blur(5px) |
| brightness() | 调整元素亮度 <1 变暗； >1 变亮 | brightness(150%) |
| contrast() | 调整元素对比度 | contrast(200%) |
| saturate() | 调整背景饱和度 | saturate(150%) |
| grayscale() | 将元素转化为灰度图 | grayscale(100%) |
| hue-rotate() | 调整元素色相（改变颜色倾向） | hue-rotate(90deg) |
| sepia() | 将元素转换为深褐色，复古效果 | sepia(70%) |
| drop-shadow() | 为元素添加投影，支持非矩形元素 | drop-shadow(5px 5px 5px #000) |
📌 drop-shadow 支持 非矩形元素 ，比 box-shadow 更灵活。
四、背景滤镜 backdrop-filter（毛玻璃效果）
backdrop-filter 用于 元素背后的区域（背景内容），常用于实现毛玻璃、磨砂效果。
css
.glass {
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px) saturate(150%);
}常用 backdrop-filter 滤镜函数
| 滤镜函数 | 作用说明 | 语法示例 |
|---|---|---|
| blur() | 高斯模糊 | blur(5px) |
| brightness() | 调整背景亮度100% 为原始亮度<100% 变暗，>100% 变亮 | brightness(150%) |
| contrast() | 调整背景对比度 | contrast(200%) |
| saturate() | 调整背景饱和度0%（无色彩）100%（原饱和）>100%（更高饱和） | saturate(150%) |
| grayscale() | 灰度效果0% 原色，100% 完全灰度 | grayscale(100%) |
| hue-rotate() | 调整背景色相 | hue-rotate(90deg) |
| sepia() | 深褐色 / 复古效果 | sepia(70%) |
| drop-shadow() | 为背景内容添加投影（支持非矩形） | drop-shadow(5px 5px 5px #669) |
📌 注意事项：
- 通常与半透明背景 配合使用，才能实现类似"毛玻璃"的视觉效果
- 处理的是 背景内容，不是元素自身
- 性能消耗较大，避免大面积使用
五、CSS 动画时间线 animation-timeline
将动画进度绑定到 滚动或可视状态。
css
animation-timeline: scroll();//滚动时间线
animation-timeline: view();//视图时间线- 滚动时间线：动画随滚动推进
- 视图时间线：动画随元素进入/离开视口
📌 常见场景：官网滚动动画、视差效果
六、CSS 变量（Custom Properties）
css
:root {
--main-color: #f00;
}
.box {
color: var(--main-color);
}:root：全局变量,全局作用域- 选择器内部：局部变量，仅影响该元素及其子元素
七、calc() 与计算能力
css
width: calc(100% - 40px);- 运算符前后必须有空格
- 可以执行数学运算(加减乘除)，支持混合单位
- 常与
vw / vh / rem搭配使用
八、vw / vh 视口单位
1vw= 视口宽度的 1%1vh= 视口高度的 1%
css
section {
height: 100vh;
}适用于：全屏布局、响应式设计
九、补充知识点
1turn= 旋转一周 =360deg- 动画优先使用
transform / opacity，性能更优