• 前端 CSS 经典：SVG 描边动画

    1. 原理

    使用 css 中的 stroke 属性，用来描述描边的样式，其中重要的属性 stroke-dasharray、stroke-dashoffset。理解了这两个属性的原理，才能理解描边动画实现的原理。

    stroke-dasharray：将描边线变成虚线、其中实线和虚线部分的长度就是它的值。

    stroke-dashoffset：描边线的偏移量。为正数时往左偏移。

    实现原理：将 stroke-dasharray 和 stroke-dashoffset 设置为

    svg 中 path 的长度，这样初始状态就是无边状态，其中 path 长度需要动态获取，通过 getTotalLength 方法可以获取 path 的长度。设置动画，将描边线的偏移量 stroke-dashoffset 设为 0，这样 svg 就从无边状态变成有边状态，其中变化的过程就是描边动画。

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>Documenttitle>
    7.     <style>
    8.       .p {
    9.         /* 如果 svg 为封闭图，那么默认填充为黑色，需要将填充色去掉，设置为 none */
    10.         fill: none;
    11.         /* 描边线颜色 */
    12.         stroke: #f40;
    13.         /* 描边线宽度 */
    14.         stroke-width: 10;
    15.         /* 描边线头设为圆头 */
    16.         stroke-linecap: round;
    17.         /* --l 为变量，通过 js 动态获取 */
    18.         stroke-dasharray: var(--l);
    19.         stroke-dashoffset: var(--l);
    20.         /* forwards当动画完成后，保持最后一帧的状态 */
    21.         animation: stroke 2s forwards;
    22.       }
    23.       @keyframes stroke {
    24.         to {
    25.           stroke-dashoffset: 0;
    26.         }
    27.       }
    28.     style>
    29.   head>
    30.   <body>
    31.     <svg class="icon" viewBox="0 0 1024 1024" width="200" height="200">
    32.       <path
    33.         class="p"
    34.         d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0zM213.333 832A298.667 298.667 0 0 1 512 533.333a170.667 170.667 0 1 1 170.667-170.666A170.667 170.667 0 0 1 512 533.333 298.667 298.667 0 0 1 810.667 832z"
    35.       >path>
    36.     svg>
    37.   body>
    38.   <script>
    39.     // 拿到 svg 路径
    40.     const paths = document.querySelectorAll(".icon .p");
    41.     // 遍历路径，动态获取路径长度，然后复制。
    42.     paths.forEach((path) => {
    43.       // getTotalLength 能拿到当前 path 路径的长度
    44.       const len = path.getTotalLength() + 1;
    45.       path.style.setProperty("--l", len);
    46.     });
    47.   script>
    48. html>

  • 相关阅读:
    修改 Git 已经提交记录的 用户名 和邮箱
    BFS专题5 跨步迷宫
    cloud的初级使用方法
    2024Selenium自动化常见问题！
    虚良SEO怎么有效的对百度蜘蛛权重优化？
    高精度乘法模板(fft）
    工业网络通讯技术的发展历程
    Mojo 语言官网
    使用 Mason 创建自己的 Flutter brick
    这三个方法让你实现电脑截图转文字的操作
  • 原文地址：https://blog.csdn.net/weixin_64684095/article/details/139032986