svg 裁剪滤镜动画时间线 css变量和函数一、前言本篇文章是由b站up 黑马pink讲前端的课程学习整理所

一、前言

本篇文章是由b站up 黑马pink讲前端的课程学习整理所得，原链接2025版pink老师最新AI+前端入门教程_哔哩哔哩_bilibili，内容包括：

SVG 描边动画和拆分动画的核心原理
clip-path 实现各种创意裁剪效果
CSS 变量和 calc () 函数的高级应用
filter 滤镜和背景滤镜的使用技巧
原生 CSS 滚动驱动动画（无需 JS）

二、SVG 基础与动画特效

SVG 的基本使用

SVG 是可缩放矢量图形，无论放大多少倍都不会失真，非常适合用于网页图标、logo 和动画制作。

屏幕截图 2026-05-17 135845.png

<!-- 基础SVG画布 -->
<svg width="200" height="200" viewBox="0 0 200 200">
  <!-- 绘制圆形 -->
  <circle cx="100" cy="100" r="50" fill="#42b983" />
  <!-- 绘制矩形 -->
  <rect x="50" y="50" width="100" height="100" fill="none" stroke="#333" stroke-width="2" />
</svg>

SVG 常见属性及描边效果

SVG 的描边属性是实现动画的基础，常用的有stroke、stroke-width、stroke-linecap、stroke-dasharray等。

  svg {
      /* 填充颜色 */
      /* fill: rgb(255, 184, 53); */
      fill: none;
      /* 描边颜色 */
      stroke: #000;
      /* 描边宽度 */
      stroke-width: 10;
      /* 描边效果 */
      stroke-dasharray: 100, 10;
    }

屏幕截图 2026-05-17 140154.png

SVG 描边动画效果

利用stroke-dasharray和stroke-dashoffset的配合，可以实现线条逐渐绘制的动画效果。

  @keyframes trans {
      0% {
        stroke-dasharray: 0, 600;
      }

      100% {
        stroke-dasharray: 600, 0;
      }
    }

    svg:hover {
      animation: trans .8s ease-in-out;
    }

屏幕录制 2026-05-17 140718.gif

案例：仿 OPPO 里程碑效果

这是一个非常经典的企业官网时间轴效果，使用 SVG 描边动画实现里程碑节点的连线逐渐出现。

屏幕录制 2026-05-17 140844.gif

【效果图说明】 展示完整的 OPPO 里程碑效果：垂直的时间线从顶部向下逐渐延伸，每个时间节点的圆圈和文字在连线到达时依次出现。

SVG 拆分动画效果

将一个完整的 SVG 图形拆分成多个部分，分别添加不同的动画，实现更丰富的视觉效果。

@keyframes move {
      0% {
        transform: translate(0);
      }

      25% {
        transform: translate(100px, -50px);
      }

      50% {
        transform: translate(200px);
      }

      75% {
        transform: translate(100px, 50px);
      }

      100% {
        transform: translate(0);
      }
    }

屏幕录制 2026-05-17 140959.gif

三、clip-path 裁剪特效

clip-path 基础用法

clip-path可以创建一个裁剪区域，只有区域内的部分才会显示，区域外的部分会被隐藏。

  /* 第二张图片 */
    .box img:nth-child(2) {
      transition: all 1.5s;
      -webkit-clip-path: polygon(0% 0%, 0 0, 0 50%, 0 100%, 0% 100%);
      clip-path: polygon(0% 0%, 0 0, 0 50%, 0 100%, 0% 100%);
    }

    .box:hover img:nth-child(2) {
      -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
      clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    }

屏幕录制 2026-05-17 141211.gif

clip-path 文字裁剪

将图片裁剪成文字的形状，实现文字填充效果。

    h1 {
      color: #292929;
      font-size: 200px;
      position: relative;
    }

    h1::after {
      content: 'HOLLEWORLD';
      background: linear-gradient(to right, #ff69b3, #fe0000, #ffa401, #ffff01, #008102, #40e1d2, #410898, #9400d4);
      color: transparent;
      background-clip: text;
      position: absolute;
      top: 0;
      left: 0;
      clip-path: circle(25% at 0% 50%);
      animation: move 2s linear infinite alternate;
    }

屏幕录制 2026-05-17 141409.gif

四、CSS 单位与函数

单位：一圈的表示

turn是 CSS 中表示角度的单位，1turn 等于 360 度，比使用 deg 更直观。

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}

屏幕录制 2026-05-17 141542.gif

CSS 变量定义和使用

CSS 变量可以让我们的代码更易维护和复用，支持动态修改。

/* 定义变量 */
:root {
  --primary-color: #42b983;
  --font-size: 16px;
  --spacing: 10px;
}

/* 使用变量 */
.btn {
  background-color: var(--primary-color);
  font-size: var(--font-size);
  padding: var(--spacing);
}

calc () 计算函数

calc()函数可以在 CSS 中执行数学计算，非常适合响应式布局。

/* 计算宽度 */
.box {
  width: calc(100% - 20px);
  height: calc(50vh - 100px);
}

变量和计算函数的结合应用

将 CSS 变量和 calc () 函数结合，可以实现更强大的动态效果。

:root {
  --columns: 4;
  --gap: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gap);
}

.grid-item {
  width: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
}

vh 和 vw 视口单位

vh和vw是相对于视口高度和宽度的单位，1vh 等于视口高度的 1%，1vw 等于视口宽度的 1%。


  .box {
      width: 50vw;
      height: 50vh;
      background-color: pink;
    }

屏幕截图 2026-05-17 141753.png

五、滤镜特效

filter 基础滤镜效果

filter属性可以为元素添加各种滤镜效果，如模糊、亮度、对比度、饱和度等。

/* 模糊效果 */
.blur {
  filter: blur(5px);
}

/* 黑白效果 */
.grayscale {
  filter: grayscale(100%);
}

/* 复古效果 */
.sepia {
  filter: sepia(100%);
}

屏幕截图 2026-05-17 141840.png

backdrop-filter 背景滤镜

backdrop-filter可以为元素后面的背景添加滤镜效果，实现毛玻璃等炫酷效果。

.navbar1 {
      top: 0;
      background: transparent;
      backdrop-filter: saturate(150%) blur(28px);
    }

    .navbar2 {
      color: black;
      top: 130px;
      /* border: 1px solid #ccc; */
      background-image: radial-gradient(transparent 1px, #fff 1px);
      background-size: 4px 4px;
      backdrop-filter: saturate(50%) blur(4px);
    }

屏幕录制 2026-05-17 141941.gif

六、原生 CSS 滚动驱动动画

滚动时间线（Scroll Timeline）

滚动时间线允许我们将动画的进度与滚动条的滚动进度绑定，无需任何 JavaScript。

.scrollbar {
      width: 0%;
      height: 3px;
      background: linear-gradient(90deg, #96f, #bf70ff, #e67aff, #ff89dc, #ffa176, #ffb90f);
      animation: scrollbar 2s linear forwards;
      /* 让动画绑定滚动时间线 */
      animation-timeline: scroll();
    }

    /* 彩色线条动画效果 */
    @keyframes scrollbar {
      0% {
        width: 0%;
      }

      100% {
        width: 100%;
      }
    }

屏幕录制 2026-05-17 142115.gif

视图时间线（View Timeline）

视图时间线是滚动时间线的一种，它将动画的进度与元素在视口中的可见性绑定。

 @keyframes anim {
      0% {
        transform: scale(1);
        opacity: 0.2;
      }

      100% {
        transform: scale(1.5);
        opacity: 1;
      }
    }
   .box img {
      opacity: 0.2;
      animation: anim 2s linear forwards;
      /* 让动画绑定视图时间线 */
      animation-timeline: view();
    }

屏幕录制 2026-05-17 142258.gif

七、总结

纯 CSS 实现的动画相比 JavaScript 动画有以下优势：

性能更好，浏览器会对 CSS 动画进行硬件加速
代码更简洁，无需编写复杂的 JavaScript 逻辑
维护性更高，样式和行为分离

svg 裁剪 滤镜 动画时间线 css变量和函数