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用于裁剪元素的可视区域，可创建复杂几何形状。使元素仅显示被裁剪区域内的部分。
clip-path:circle(50% at 50% 50%);clip-path:polygon(0 0,100% 0,100% 80%,0 100%);可视化工具：
- https://tools.jb51.net/static/api/css3path/index.html
📌 使用建议：
- 常配合
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用于元素背后的区域（背景内容），常用于实现毛玻璃、磨砂效果。
.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
将动画进度绑定到滚动或可视状态。
animation-timeline:scroll();//滚动时间线animation-timeline:view();//视图时间线- 滚动时间线：动画随滚动推进
- 视图时间线：动画随元素进入/离开视口
📌 常见场景：官网滚动动画、视差效果
六、CSS 变量（Custom Properties）
:root{--main-color:#f00;}.box{color:var(--main-color);}:root：全局变量,全局作用域- 选择器内部：局部变量，仅影响该元素及其子元素
七、calc() 与计算能力
width:calc(100% - 40px);- 运算符前后必须有空格
- 可以执行数学运算(加减乘除)，支持混合单位
- 常与
vw / vh / rem搭配使用
八、vw / vh 视口单位
1vw= 视口宽度的 1%1vh= 视口高度的 1%
section{height:100vh;}适用于：全屏布局、响应式设计
九、补充知识点
1turn= 旋转一周 =360deg- 动画优先使用
transform / opacity，性能更优
