CSS3 技术拓展学习笔记

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