前沿技术拓展

SVG图片

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形标准，由W3C制定，支持无损缩放、交互性和动态效果。其核心特点包括：

SVG组成

svg组成：

• svg根元素。svg图标必须包裹在
• 路径。通过d属性定义路径指令。M：移动画笔到坐标点，Z：闭合路径。

SVG属性

SVG图标常见CSS属性：

svg是行内块元素类似，可以设置大小、移动位置、动画等。但是有自己特殊的样式属性。

clip-path

clip-path创建复杂的裁剪形状，使元素仅显示被裁剪区域内的部分。

滤镜filter

CSS滤镜通过filter属性实现，可对元素及其子元素进行实时图像处理，无需修改原始素材。

背景滤镜backdrop-filter

backdrop-filter是CSS中的一个图形滤镜属性，主要用于对元素背后的区域（即“背景”）应用滤镜效果。它通常与半透明背景配合使用，能实现类似“毛玻璃”的视觉效果。

动画时间线animation-timeline

animation-timeline是CSS中用于控制动画时间线的核心属性，它允许开发者将动画进度与特定事件（如滚动、视口可见性）绑定，从而实现更复杂的交互效果。

变量和函数

CSS增强了逻辑性和动态计算能力，比如CSS变量和一些动态函数（calc()、clamp()等）

使用场景：

• 主题切换
• 响应式设计
• 交互动画等

变量

CSS变量（也称为自定义属性）是一种动态存储和复用值的机制。它让样式管理更灵活、可维护。变量可以理解为一个容器，里面可以存放数据。

CSS3计算能力

calc()函数可以执行数学运算（加减乘除），支持混合单位。

vw/vh

vw和vh是CSS中的视口单位（Viewpoint Units），用于基于浏览器视口（Viewport）的尺寸来定义元素的尺寸或位置。

vw和vh始终基于浏览器可视区域的实时尺寸计算（不包含浏览器工具栏、标签栏等界面元素），它们的值会自动更新。特别适合响应式设计、全屏布局、移动适配等场景。

vw（Viewport Width）：标识视口宽度的1%。

例如，若当前浏览器视口的宽度为1920px，则1vw = 1920px * 1% = 19.2px

vh（Viewport Height）：表示视口高度的1%。

例如，若当前浏览器视口的宽度为1080px，则1vh = 1080px * 1% = 10.8px