1404 字

4 分钟

css前沿技术拓展

2026-06-07

前端

笔记

/

CSS

统计加载中...

前言技术拓展#

SVG图片#

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

矢量特性：无论放大或做小均保持清晰，文件体积小，适合网络传输，尤其适用于高分辨率设备
可编辑性：直接通过文本编辑器修改SVG代码，支持颜色，形状，动画参数的实时调整
交互性：支持javascript和CSS控制，可实现点击，悬停等动态响应
兼容性：主流浏览器（Chrome,Firefox,Safari,Edge）均支持SVG格式，移动端适配性强

SVG图片下载

svg组成

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

svg图标常见css属性

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

属性	描述	取值示例
`fill`	填充颜色（支持颜色值、渐变、图案），不需要时可改为 `none`	`fill: #f00;`
`stroke`	定义描边颜色（支持颜色值、渐变、图案）	`stroke: #f00;`
`stroke-width`	描边宽度（支持像素、百分比、px、em 等单位）	`stroke-width: 2px;`
`stroke-dasharray`	虚线模式（实线长度 + 间隔长度）	`stroke-dasharray: 10;`
`stroke-dashoffset`	调整虚线与间隔的起始位置（负值表示向左偏移）

获得svg图片描边的长度
给svg添加id属性，例如<svg id="svg-icon"></svg>，在浏览器console中使用javascript,svg-icon.getTotalLength()即可获得svg图片描边的长度 clip-path

clip-path属性用于定义元素的剪裁路径

clip-path#

取值	描述	取值示例
`circle()`	圆形裁剪	`circle(50% at 50% 50%)`
`ellipse()`	椭圆裁剪	`ellipse(50% 30% at 50% 50%)`
`polygon()`	多边形裁剪	`polygon(50% 0%, 100% 100%, 0% 100%)`
`inset()`	矩形裁剪	`inset(10% 20% 30% 10%)`
`path()`	任意路径裁剪	`path('M0 0 L100 100 Z')`
`url()`	引用SVG clipPath元素	`url(#clipId)`

clip-path使用示例

1
/* 圆形裁剪 */
2
.element {
3
  clip-path: circle(50% at 50% 50%);
4
}
5

6
/* 多边形裁剪（三角形）*/
7
.element {
8
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
9
}
10

11
/* 动画效果 */
12
.element {
13
  clip-path: circle(0% at 50% 50%);
14
  transition: clip-path 0.5s ease;
15
}
16
.element:hover {
17
  clip-path: circle(50% at 50% 50%);
18
}

scale()#

scale()属性用于缩放元素的大小，默认缩放比例为1，即不缩放

rotate()#

turn单位用于旋转元素，1turn等于360度

filter()#

filter()属性用于对元素进行图像处理，如模糊，锐化，颜色转换等

滤镜函数	语法示例与说明
`blur()`	高斯模糊：`blur(5px)`
`brightness()`	调整元素亮度：`brightness(150%)` - `100%`（或 `1`）为原始亮度 - `<100%`（或 `<1`）变暗 - `>100%`（或 `>1`）变亮
`contrast()`	调整元素对比度：`contrast(200%)`（取值规则同 `brightness()`）
`saturate()`	调整背景饱和度：取值 `0%`（无色彩）~~`100%`（原饱和度）~~`>100%`（更高饱和）
`grayscale()`	将元素转换为灰度图：`grayscale(100%)` - `0%`（或 `0`）为原始色彩 - `100%`（或 `1`）为完全灰度
`hue-rotate()`	调整元素色相（改变颜色倾向）：`hue-rotate(90deg)`
`sepia()`	将元素转换为深褐色（复古效果）：`sepia(70%)` - `0%`（或 `0`）为原始色彩 - `100%`（或 `1`）为完全深褐色
`drop-shadow()`	为元素添加投影（类似 `box-shadow`，但支持非矩形元素）：`drop-shadow(5px 5px 5px #669)`

backdrop-filter()#

背景滤镜的使用和filter()属性类似，只是作用范围不同。backdrop-filter()属性用于对元素的背景进行滤镜处理，影响元素的透明度和颜色。

动画时间线#

animation-timeline属性用于定义动画的时间线

animation-timeline取值

取值	描述	取值示例
`scroll()`	滚动时间线，绑定滚动条位置	`animation-timeline: scroll();`
`view()`	视图时间线，绑定元素在视口中的可见比例	`animation-timeline: view();`
`auto`	使用animation-name定义的动画	`animation-timeline: auto;`

scroll()滚动时间线

1
/* 默认绑定根元素滚动条 */
2
.scrollbar {
3
  animation-timeline: scroll();
4
}
5

6
/* 绑定最近的可滚动祖先容器 */
7
.element {
8
  animation-timeline: scroll(nearest);
9
}
10

11
/* 绑定根元素滚动条 */
12
.element {
13
  animation-timeline: scroll(root);
14
}
15

16
/* 绑定特定元素的滚动条 */
17
.container {
18
  overflow-y: auto;
19
  scrollbar-gutter: stable;
20
}
21
.progress {
22
  animation-timeline: scroll(self);
23
}

scroll()滚动时间线示例

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <style>
5
    * { margin: 0; padding: 0; }
6
    body { height: 3000px; }
7
    .navbar {
8
      position: fixed;
9
      top: 0;
10
      left: 0;
11
      width: 100%;
12
      height: 100px;
13
      background: #fff;
14
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
15
    }
16
    .scrollbar {
17
      width: 0%;
18
      height: 3px;
19
      background: linear-gradient(90deg, #96f, #bf70ff, #e67aff, #ff89dc, #ffa176, #ffb90f);
20
      animation: scrollbar linear forwards;
21
      animation-timeline: scroll();
22
    }
23
    @keyframes scrollbar {
24
      0% { width: 0%; }
25
      100% { width: 100%; }
26
    }
27
  </style>
28
</head>
29
<body>
30
  <div class="navbar">
31
    <div class="scrollbar"></div>
32
  </div>
33
  <div class="content">
34
    <p>里面有很多的文字</p>
35
    <!-- 更多内容产生滚动 -->
36
  </div>
37
</body>
38
</html>

view()视图时间线

1
/* 绑定元素在视口中的可见比例 */
2
.element {
3
  animation: fade-in linear;
4
  animation-timeline: view();
5
}
6

7
@keyframes fade-in {
8
  from { opacity: 0; }
9
  to { opacity: 1; }
10
}
11

12
/* 带有滚动轴的视图时间线 */
13
.element {
14
  animation: slide-in linear;
15
  animation-timeline: view(scroll());
16
}
17

18
@keyframes slide-in {
19
  from { transform: translateY(100%); }
20
  to { transform: translateY(0); }
21
}
22

23
/* 自定义视图时间线范围 */
24
.element {
25
  animation: scale linear;
26
  animation-timeline: view(inline);
27
  animation-range: entry 0% cover 50%;
28
}

view()视图时间线示例

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <style>
5
    .container {
6
      height: 200vh;
7
      padding: 50px;
8
    }
9
    .card {
10
      height: 300px;
11
      background: #f0f0f0;
12
      margin-bottom: 100px;
13
      animation: slide-in linear both;
14
      animation-timeline: view();
15
    }
16
    @keyframes slide-in {
17
      from {
18
        transform: translateY(100%);
19
        opacity: 0;
20
      }
21
      to {
22
        transform: translateY(0);
23
        opacity: 1;
24
      }
25
    }
26
  </style>
27
</head>
28
<body>
29
  <div class="container">
30
    <div class="card">卡片1</div>
31
    <div class="card">卡片2</div>
32
    <div class="card">卡片3</div>
33
  </div>
34
</body>
35
</html>

animation-range视图时间线范围

取值	描述
`cover 0%`	元素完全进入视口前
`cover 100%`	元素完全离开视口后
`entry 0%`	元素开始进入视口时
`entry 100%`	元素刚好完全进入视口时
`exit 0%`	元素开始离开视口时
`exit 100%`	元素刚好完全离开视口时

animation-range使用示例

1
.element {
2
  animation: scale linear both;
3
  animation-timeline: view();
4
  animation-range: entry 0% cover 40%;
5
}
6

7
@keyframes scale {
8
  from { transform: scale(0.5); }
9
  to { transform: scale(1); }
10
}

animation-duration和animation-timeline的关系

1
/* 当使用scroll()或view()时，animation-duration表示滚动距离对应的时间 */
2
.progress {
3
  animation-name: progress;
4
  animation-duration: 1s;
5
  animation-timeline: scroll();
6
  animation-fill-mode: both;
7
}
8

9
@keyframes progress {
10
  from { width: 0; }
11
  to { width: 100%; }
12
}
13

14
/* 如果想要动画速度与滚动同步，设置duration为1s即可 */

兼容性说明

动画时间线API是较新的CSS特性，目前主要在Chrome、Edge等Chromium内核浏览器中得到支持，Firefox和Safari支持有限。

变量和函数#

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

使用场景：

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

变量#

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

定义变量：通过--变量名定义变量

1
  --color: #007bff;

使用变量：通过var(--变量名)使用变量

1
  color: var(--color);

作用域：变量的作用范围

1
:root { /* 全局变量 */
2
  --color: #007bff;
3
}
4
.box { /* 局部变量 */
5
  --color: #0056b3;
6
}

全局作用域：通过:root元素定义，作用于整个网页
局部作用域：在特定选择器中定义，仅影响该元素及其子元素的样式

CSS3计算能力#

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

1
  width: calc(80% - 10px); /* 父元素的宽度的80%减去10px */

加减乘除运算写法：+, -, *, /，注意符号左右两侧保留空格

vw/vh#

vw和vh是CSS中的视口单位（viewport units），用于基于浏览器视口（viewport）的储存来定义元素的尺寸或位置

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

vw（viewport width）：表示视口宽度的1%
vh（viewport height）：表示视口高度的1%

css前沿技术拓展

https://fairycrane.website/posts/frontier_expansion/

作者

仙鹤

发布于

2026-06-07

许可协议

CC BY-NC-SA 4.0

部分信息可能已经过时

css移动网页开发

交互动效设计

有你在的今天