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用于当前元素及其子元素本身的实时图像处理，无需修改原始素材。

📌drop-shadow支持非矩形元素，比box-shadow更灵活。

四、背景滤镜 backdrop-filter（毛玻璃效果）

backdrop-filter用于元素背后的区域（背景内容），常用于实现毛玻璃、磨砂效果。

.glass{background:rgba(255,255,255,0.3);backdrop-filter:blur(10px)saturate(150%);}

常用 backdrop-filter 滤镜函数

📌 注意事项：

• 通常与半透明背景配合使用，才能实现类似“毛玻璃”的视觉效果
• 处理的是背景内容，不是元素自身
• 性能消耗较大，避免大面积使用

五、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，性能更优