来，点一下这个月饼看看会发生什么

白日梦企鹅
424 阅读4分钟

来，点一下这个月饼看看会发生什么

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛 font.png 现在看起来它只是一个普通的兔子月饼，但如果点一下的话： tuzi.gif html+css，稍微用了一点svg，js原生做的交互，不需要任何额外插件，简单易上手~

1.准备素材

所需要的素材其实总共就三个，文字、兔子月饼和手指，文字这里我用的是png格式的图片，获取网站为：izihun.com/ ，兔子月饼和手指的获取网站就是大家熟知的iconfont

2.搭建页面

兔子月饼

我拿到的兔子月饼是这样的：

image.png 以下是svg的代码：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1631146967061"
  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4076"
  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
  <defs>
    <style type="text/css"></style>
  </defs>
  <path
    d="M376.192 366.976c-11.456-0.768-20.416-6.08-20-11.84 0.384-5.728 9.984-9.76 21.44-8.992 11.424 0.768 20.352 6.048 19.968 11.808-0.384 5.76-9.984 9.792-21.44 9.024m321.984 196.064c-8.512 0-16.384 2.56-22.944 7.04a124.16 124.16 0 0 0-4.16-16c-13.12-39.648-46.752-72-97.28-93.6a313.472 313.472 0 0 0-56-17.696 77.44 77.44 0 0 0 9.088-16.704c17.984 4.544 61.952 14.528 102.976 14.624 19.872 0.032 39.04-2.24 54.24-8.64 28.96-12.096 46.4-34.24 45.536-57.792-0.832-23.04-19.04-42.784-48.704-52.736-53.664-17.984-150.464 16.256-174.272 25.28-22.464-21.728-58.048-35.84-98.016-35.904-67.936-0.128-123.296 40.224-123.392 89.984-0.096 47.424 50.08 86.496 113.6 90.176-6.816 23.04-17.728 78.464 14.016 131.936-20.256 0.832-53.024 5.024-72.32 22.24-9.92 8.8-15.264 19.872-16 32.928-0.8 15.296 5.568 23.36 11.04 27.392 6.368 4.704 14.4 6.24 22.272 6.272 7.616 0 14.976-1.44 20.352-2.816 9.536 10.752 25.632 15.264 42.496 11.744 30.848-6.496 106.976-1.92 147.104 1.824a28.352 28.352 0 0 0 2.688 0.096c21.344 0.064 54.4-20.96 76.928-49.28 10.112-12.736 17.664-26.24 22.656-40.096a40.8 40.8 0 0 0 68.736-29.44 40.8 40.8 0 0 0-40.64-40.832"
    fill="#E15523" p-id="4077"></path>
  <path
    d="M512 809.792c-164.224 0-297.792-133.568-297.792-297.792 0-164.224 133.568-297.792 297.792-297.792 164.224 0 297.792 133.568 297.792 297.792 0 164.224-133.568 297.792-297.792 297.792M960 512c0-41.28-18.784-80.48-50.688-106.464A137.632 137.632 0 0 0 899.968 288a137.664 137.664 0 0 0-97.12-66.88A137.664 137.664 0 0 0 736 124.064a137.664 137.664 0 0 0-117.536-9.344A137.664 137.664 0 0 0 512 64c-41.28 0-80.512 18.816-106.464 50.688A137.632 137.632 0 0 0 288 124.032 137.664 137.664 0 0 0 221.12 221.12 137.664 137.664 0 0 0 124.064 288a137.664 137.664 0 0 0-9.344 117.504A137.664 137.664 0 0 0 64 512c0 41.28 18.784 80.48 50.688 106.464A137.664 137.664 0 0 0 124.032 736a137.664 137.664 0 0 0 97.12 66.88A137.664 137.664 0 0 0 288 899.936a137.664 137.664 0 0 0 117.536 9.344A137.664 137.664 0 0 0 512 960c41.28 0 80.48-18.816 106.464-50.688 38.4 14.624 81.76 11.328 117.536-9.344a137.664 137.664 0 0 0 66.88-97.12A137.664 137.664 0 0 0 899.936 736a137.632 137.632 0 0 0 9.344-117.536A137.664 137.664 0 0 0 960 512"
    fill="#E15523" p-id="4078"></path>
</svg>

可以看到，当中有一些信息是没有用的，如开头、class、版本号等都是可以进行删除的，下面是简化版本~

<svg viewBox="0 0 1024 1024" width="200" height="200">
  <path
    d="M376.192 366.976c-11.456-0.768-20.416-6.08-20-11.84 0.384-5.728 9.984-9.76 21.44-8.992 11.424 0.768 20.352 6.048 19.968 11.808-0.384 5.76-9.984 9.792-21.44 9.024m321.984 196.064c-8.512 0-16.384 2.56-22.944 7.04a124.16 124.16 0 0 0-4.16-16c-13.12-39.648-46.752-72-97.28-93.6a313.472 313.472 0 0 0-56-17.696 77.44 77.44 0 0 0 9.088-16.704c17.984 4.544 61.952 14.528 102.976 14.624 19.872 0.032 39.04-2.24 54.24-8.64 28.96-12.096 46.4-34.24 45.536-57.792-0.832-23.04-19.04-42.784-48.704-52.736-53.664-17.984-150.464 16.256-174.272 25.28-22.464-21.728-58.048-35.84-98.016-35.904-67.936-0.128-123.296 40.224-123.392 89.984-0.096 47.424 50.08 86.496 113.6 90.176-6.816 23.04-17.728 78.464 14.016 131.936-20.256 0.832-53.024 5.024-72.32 22.24-9.92 8.8-15.264 19.872-16 32.928-0.8 15.296 5.568 23.36 11.04 27.392 6.368 4.704 14.4 6.24 22.272 6.272 7.616 0 14.976-1.44 20.352-2.816 9.536 10.752 25.632 15.264 42.496 11.744 30.848-6.496 106.976-1.92 147.104 1.824a28.352 28.352 0 0 0 2.688 0.096c21.344 0.064 54.4-20.96 76.928-49.28 10.112-12.736 17.664-26.24 22.656-40.096a40.8 40.8 0 0 0 68.736-29.44 40.8 40.8 0 0 0-40.64-40.832"
    fill="#E15523"></path>
  <path
    d="M512 809.792c-164.224 0-297.792-133.568-297.792-297.792 0-164.224 133.568-297.792 297.792-297.792 164.224 0 297.792 133.568 297.792 297.792 0 164.224-133.568 297.792-297.792 297.792M960 512c0-41.28-18.784-80.48-50.688-106.464A137.632 137.632 0 0 0 899.968 288a137.664 137.664 0 0 0-97.12-66.88A137.664 137.664 0 0 0 736 124.064a137.664 137.664 0 0 0-117.536-9.344A137.664 137.664 0 0 0 512 64c-41.28 0-80.512 18.816-106.464 50.688A137.632 137.632 0 0 0 288 124.032 137.664 137.664 0 0 0 221.12 221.12 137.664 137.664 0 0 0 124.064 288a137.664 137.664 0 0 0-9.344 117.504A137.664 137.664 0 0 0 64 512c0 41.28 18.784 80.48 50.688 106.464A137.664 137.664 0 0 0 124.032 736a137.664 137.664 0 0 0 97.12 66.88A137.664 137.664 0 0 0 288 899.936a137.664 137.664 0 0 0 117.536 9.344A137.664 137.664 0 0 0 512 960c41.28 0 80.48-18.816 106.464-50.688 38.4 14.624 81.76 11.328 117.536-9.344a137.664 137.664 0 0 0 66.88-97.12A137.664 137.664 0 0 0 899.936 736a137.632 137.632 0 0 0 9.344-117.536A137.664 137.664 0 0 0 960 512"
    fill="#E15523"></path>
</svg>

viewBox设置画布，width height设置宽高，path为路径元素，d里面的属性在后面画线的时候会详细说，fill为填充的意思

将图标变成我们想要的效果，只需将fill设置为none，并且给元素新增属性stroke（边框），在通过stroke-width（边框宽度）进行相应的调整就可以得到：

image.png

调整代码：

<svg viewBox="0 0 1024 1024" width="200" height="200">
  <path
    d="M376.192 366.976c-11.456-0.768-20.416-6.08-20-11.84 0.384-5.728 9.984-9.76 21.44-8.992 11.424 0.768 20.352 6.048 19.968 11.808-0.384 5.76-9.984 9.792-21.44 9.024m321.984 196.064c-8.512 0-16.384 2.56-22.944 7.04a124.16 124.16 0 0 0-4.16-16c-13.12-39.648-46.752-72-97.28-93.6a313.472 313.472 0 0 0-56-17.696 77.44 77.44 0 0 0 9.088-16.704c17.984 4.544 61.952 14.528 102.976 14.624 19.872 0.032 39.04-2.24 54.24-8.64 28.96-12.096 46.4-34.24 45.536-57.792-0.832-23.04-19.04-42.784-48.704-52.736-53.664-17.984-150.464 16.256-174.272 25.28-22.464-21.728-58.048-35.84-98.016-35.904-67.936-0.128-123.296 40.224-123.392 89.984-0.096 47.424 50.08 86.496 113.6 90.176-6.816 23.04-17.728 78.464 14.016 131.936-20.256 0.832-53.024 5.024-72.32 22.24-9.92 8.8-15.264 19.872-16 32.928-0.8 15.296 5.568 23.36 11.04 27.392 6.368 4.704 14.4 6.24 22.272 6.272 7.616 0 14.976-1.44 20.352-2.816 9.536 10.752 25.632 15.264 42.496 11.744 30.848-6.496 106.976-1.92 147.104 1.824a28.352 28.352 0 0 0 2.688 0.096c21.344 0.064 54.4-20.96 76.928-49.28 10.112-12.736 17.664-26.24 22.656-40.096a40.8 40.8 0 0 0 68.736-29.44 40.8 40.8 0 0 0-40.64-40.832"
    fill="none" stroke="#000" stroke-width="7"></path>
  <path
    d="M512 809.792c-164.224 0-297.792-133.568-297.792-297.792 0-164.224 133.568-297.792 297.792-297.792 164.224 0 297.792 133.568 297.792 297.792 0 164.224-133.568 297.792-297.792 297.792M960 512c0-41.28-18.784-80.48-50.688-106.464A137.632 137.632 0 0 0 899.968 288a137.664 137.664 0 0 0-97.12-66.88A137.664 137.664 0 0 0 736 124.064a137.664 137.664 0 0 0-117.536-9.344A137.664 137.664 0 0 0 512 64c-41.28 0-80.512 18.816-106.464 50.688A137.632 137.632 0 0 0 288 124.032 137.664 137.664 0 0 0 221.12 221.12 137.664 137.664 0 0 0 124.064 288a137.664 137.664 0 0 0-9.344 117.504A137.664 137.664 0 0 0 64 512c0 41.28 18.784 80.48 50.688 106.464A137.664 137.664 0 0 0 124.032 736a137.664 137.664 0 0 0 97.12 66.88A137.664 137.664 0 0 0 288 899.936a137.664 137.664 0 0 0 117.536 9.344A137.664 137.664 0 0 0 512 960c41.28 0 80.48-18.816 106.464-50.688 38.4 14.624 81.76 11.328 117.536-9.344a137.664 137.664 0 0 0 66.88-97.12A137.664 137.664 0 0 0 899.936 736a137.632 137.632 0 0 0 9.344-117.536A137.664 137.664 0 0 0 960 512"
    fill="none" stroke="#000" stroke-width="7"></path>
</svg>

点一下

image.png

这个就没什么好说的了，手的图标在拿过来的时候是向右指的，通过transform: rotate(270deg);即可实现向上指效果

文字

image.png

如不是透明背景的话去ps一下即可🤣

圆（月亮）

image.png

新建正方形，加边框，背景颜色设置为透明,使用border-radius调正圆角（px值为div长度的一半刚刚好）

记得加box-sizing:border-box（将边框也算作宽度），不然出来的圆会感觉别扭的

image.png

线

image.png 这里是纯svg，红色为第一条线，白色为第二条线

image.png 先贴代码：

<svg class="line" width="1000" height="505.0000000000001">
    <path d="m700 100l-300 0c0 0 -50 0 -50 50c0 0 0 50 50 50l100 0c0 0 50 0 50 50c0 0 0 50 -50 50l-500 0 " fill="none"
      stroke="#fff" stroke-width="5" />
    <path d="m800 200l-300 0c0 0 -50 0 -50 50c0 0 0 50 50 50l100 0c0 0 50 0 50 50c0 0 0 50 -50 50l-500 0 " fill="none"
      stroke="#fff" stroke-width="5" />
  </svg>

前面介绍过的属性在此不在赘述，这里主要是介绍d这个属性:

m为开始，l为画线，c为画曲线，m与l均接受一个坐标，而c接受三个，坐标之间由空格分隔，其余无需任何格式化操作，起始位置为左上角，我这里通过class来将整体移动到想要放置的位置

上述代码有两个path元素，第一个为第一条线，第二个为第二条线，下面解释皆以第一条线作为参考

M

设置起始点，如上文起始点是从左上开始的（坐标为0 0），x轴往右为正，y轴往下为正，如上述代码m700 100既是移动起始点到(700,100)的位置进行绘制

L

画线，前面必须已有坐标，基于上一个坐标加上自己本身的坐标，两点一线,如上述代码l-300 0即为从(700,100)到(-300 0)画一条直线（ps：m使坐标移动到(700,100)，以这个坐标为(0,0)出发再画的L，所以L只更改了x坐标就完成了画直线的操作）

C

画曲线，三个坐标，第一个起始，第二个参考，第三个结束

参考代码，0 0起始（与L的ps原理相同），-50 0为参考点，-50 50结束，画出曲线（线的一次拐弯操作我是画了两次90，所以会有多个c的操作~）

image.png

建议想要画的角度不要超过90~

下面那条线只需稍微改动一下m的坐标就可实现啦

3.动起来！

使用原生js获取dom：

  var class_icon = document.getElementsByClassName("icon")[0];
  var icon = document.getElementById("icon");
  var class_button = document.getElementsByClassName('button')[0];
  var class_black = document.getElementsByClassName('black')[0];
  var class_paths = document.getElementsByClassName('path');
  var class_path_stroke = document.getElementsByClassName('path-stroke');
  var class_circle = document.getElementsByClassName('circle')[0];
  var class_line = document.getElementsByClassName('line')[0];

当点击兔子月饼的时候向下移动，那肯定是要给兔子月饼（class_icon）来做点击事件的：

icon.addEventListener("click", () => {
    if (class_icon.style.marginTop == '150px') {
    // 回
      class_icon.style.marginTop = '0px';
    } else {
    // 去
      class_icon.style.marginTop = '150px';
    }
}

因为不需要进行其他变化，所以偷懒弄成固定值了🤣

但是这样看到的月饼只会闪现，如果想要让月饼进行丝滑的位移，只需要这一句即可：

.icon {
      transition: all 1s;
    }

在该元素执行任何css变动时，都会有1s的过渡时长，这样就达到移动的效果啦~

其他元素同理，在你想要进行css变换的元素样式中添加transition，优美的过渡效果便会立即展现：

icon.addEventListener("click", () => {
    if (class_icon.style.marginTop == '150px') {
      // 回
      class_icon.style.marginTop = '0px';
      class_button.style.opacity = '100%';
      class_black.style.top = '-100vh';
      for (var i = 0; i < class_paths.length; i++) {
        class_paths[i].style.fill = '#000';
      }
      for (var k = 0; k < class_path_stroke.length; k++) {
        class_path_stroke[k].style.stroke = '#000';
      }
      class_circle.style.opacity = '0';
    } else {
      // 去
      class_icon.style.marginTop = '150px';
      class_button.style.opacity = '0';
      class_black.style.top = '0px';
      for (var i = 0; i < class_paths.length; i++) {
        class_paths[i].style.fill = '#fff';
      }
      for (var k = 0; k < class_path_stroke.length; k++) {
        class_path_stroke[k].style.stroke = '#fff';
      }
      class_circle.style.opacity = '100%';
    }
  });

ps：svg元素与path元素里的属性都属于style里，在js操作的时候一同视为样式操作即可~

线的移动

感觉到了现在是不是就差不多了？

还有最后一步哦~

1631155033234.gif

上面也说了，这两条线是用path画出来的，那么如何实现上述gif的效果呢？

其实很简单

在svg中有两个属性，一个是stroke-dasharray，一个是stroke-dashoffset，前者是负责将线拆成若干虚线（根据数值），后者则是控制虚线显示的数量，体现在代码上就是这样的：

.line {
      stroke-dasharray: 1490;
      stroke-dashoffset: 1490;
    }

ps：这个数值可以根据元素的长度进行动态获取，我这里是纯试出来的，详情可参考：手写 SVG 动态折线图_哔哩哔哩_bilibili

stroke-dashoffset在与stroke-dasharray相等时，线条完全消失，在为0时，线条全部展示（要素察觉）

也就是说，有了这两个属性后，只需将stroke-dashoffset由满变为0即可完成线条的动态效果！

参考代码：

icon.addEventListener("click", () => {
    if (class_icon.style.marginTop == '150px') {
      for (var j = 0; j < 1500; j++) {
        class_line.style.strokeDashoffset = j;
      }
    } else {
      for (var j = 0; j < 1500; j++) {
        class_line.style.strokeDashoffset = 1490 - j;
      }
    }
  });

4.结束

至此全部完成

源码，提前祝大家中秋快乐~

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .icon {
      display: flex;
      justify-content: center;
      transition: all 1s;
    }

    #icon {
      z-index: 9999;
    }

    .button {
      display: flex;
      justify-content: center;
      transition: all .8s;
    }

    .touch {
      transform: rotate(270deg);
      width: 100px;
      height: 100px;
    }

    .black {
      position: absolute;
      width: 100%;
      height: 100vh;
      transition: all .8s;
      background-color: black;
      top: -100vh;
      z-index: -1;
    }

    .path,
    .path-stroke,
    .black {
      transition: .8s;
    }

    .circle {
      width: 200px;
      height: 200px;
      border: 5px solid #fff;
      border-radius: 100px;
      position: absolute;
      box-sizing: border-box;
      top: 300px;
      left: 1500px;
      opacity: 0;
      transition: .8s;
      transition-delay: .5s;
    }

    .line {
      position: absolute;
      left: 900px;
      top: 350px;
      stroke-dasharray: 1490;
      stroke-dashoffset: 1490;
      transition: 1s;
      transition-delay: 1s;
    }
  </style>
</head>

<body>
  <div class="icon">
    <svg id="icon" viewBox="0 0 1024 1024" width="500" height="500">
      <path
        d="M376.192 366.976c-11.456-0.768-20.416-6.08-20-11.84 0.384-5.728 9.984-9.76 21.44-8.992 11.424 0.768 20.352 6.048 19.968 11.808-0.384 5.76-9.984 9.792-21.44 9.024m321.984 196.064c-8.512 0-16.384 2.56-22.944 7.04a124.16 124.16 0 0 0-4.16-16c-13.12-39.648-46.752-72-97.28-93.6a313.472 313.472 0 0 0-56-17.696 77.44 77.44 0 0 0 9.088-16.704c17.984 4.544 61.952 14.528 102.976 14.624 19.872 0.032 39.04-2.24 54.24-8.64 28.96-12.096 46.4-34.24 45.536-57.792-0.832-23.04-19.04-42.784-48.704-52.736-53.664-17.984-150.464 16.256-174.272 25.28-22.464-21.728-58.048-35.84-98.016-35.904-67.936-0.128-123.296 40.224-123.392 89.984-0.096 47.424 50.08 86.496 113.6 90.176-6.816 23.04-17.728 78.464 14.016 131.936-20.256 0.832-53.024 5.024-72.32 22.24-9.92 8.8-15.264 19.872-16 32.928-0.8 15.296 5.568 23.36 11.04 27.392 6.368 4.704 14.4 6.24 22.272 6.272 7.616 0 14.976-1.44 20.352-2.816 9.536 10.752 25.632 15.264 42.496 11.744 30.848-6.496 106.976-1.92 147.104 1.824a28.352 28.352 0 0 0 2.688 0.096c21.344 0.064 54.4-20.96 76.928-49.28 10.112-12.736 17.664-26.24 22.656-40.096a40.8 40.8 0 0 0 68.736-29.44 40.8 40.8 0 0 0-40.64-40.832"
        fill="none" stroke="#000" stroke-width="7" class="path-stroke"></path>
      <path
        d="M512 809.792c-164.224 0-297.792-133.568-297.792-297.792 0-164.224 133.568-297.792 297.792-297.792 164.224 0 297.792 133.568 297.792 297.792 0 164.224-133.568 297.792-297.792 297.792M960 512c0-41.28-18.784-80.48-50.688-106.464A137.632 137.632 0 0 0 899.968 288a137.664 137.664 0 0 0-97.12-66.88A137.664 137.664 0 0 0 736 124.064a137.664 137.664 0 0 0-117.536-9.344A137.664 137.664 0 0 0 512 64c-41.28 0-80.512 18.816-106.464 50.688A137.632 137.632 0 0 0 288 124.032 137.664 137.664 0 0 0 221.12 221.12 137.664 137.664 0 0 0 124.064 288a137.664 137.664 0 0 0-9.344 117.504A137.664 137.664 0 0 0 64 512c0 41.28 18.784 80.48 50.688 106.464A137.664 137.664 0 0 0 124.032 736a137.664 137.664 0 0 0 97.12 66.88A137.664 137.664 0 0 0 288 899.936a137.664 137.664 0 0 0 117.536 9.344A137.664 137.664 0 0 0 512 960c41.28 0 80.48-18.816 106.464-50.688 38.4 14.624 81.76 11.328 117.536-9.344a137.664 137.664 0 0 0 66.88-97.12A137.664 137.664 0 0 0 899.936 736a137.632 137.632 0 0 0 9.344-117.536A137.664 137.664 0 0 0 960 512"
        fill="none" stroke="#000" stroke-width="7" class="path-stroke"></path>
    </svg>
  </div>
  <div class="button">
    <h1>点一下</h1>
    <img src="./touch.png" class="touch">
  </div>
  <div class="circle"></div>
  <svg class="line" width="1000" height="505.0000000000001">
    <path d="m700 100l-300 0c0 0 -50 0 -50 50c0 0 0 50 50 50l100 0c0 0 50 0 50 50c0 0 0 50 -50 50l-500 0 " fill="none"
      stroke="#fff" stroke-width="5" />
    <path d="m800 200l-300 0c0 0 -50 0 -50 50c0 0 0 50 50 50l100 0c0 0 50 0 50 50c0 0 0 50 -50 50l-500 0 " fill="none"
      stroke="#fff" stroke-width="5" />
  </svg>
  <img src="./font.png" alt="">
  <div class="black"></div>
</body>
<script>
  var class_icon = document.getElementsByClassName("icon")[0];
  var icon = document.getElementById("icon");
  var class_button = document.getElementsByClassName('button')[0];
  var class_black = document.getElementsByClassName('black')[0];
  var class_paths = document.getElementsByClassName('path');
  var class_path_stroke = document.getElementsByClassName('path-stroke');
  var class_circle = document.getElementsByClassName('circle')[0];
  var class_line = document.getElementsByClassName('line')[0];
  icon.addEventListener("click", () => {
    if (class_icon.style.marginTop == '150px') {
      // 回
      class_icon.style.marginTop = '0px';
      class_button.style.opacity = '100%';
      class_black.style.top = '-100vh';
      for (var i = 0; i < class_paths.length; i++) {
        class_paths[i].style.fill = '#000';
      }
      for (var k = 0; k < class_path_stroke.length; k++) {
        class_path_stroke[k].style.stroke = '#000';
      }
      class_circle.style.opacity = '0';
      for (var j = 0; j < 1500; j++) {
        class_line.style.strokeDashoffset = j;
      }
    } else {
      // 去
      class_icon.style.marginTop = '150px';
      class_button.style.opacity = '0';
      class_black.style.top = '0px';
      for (var i = 0; i < class_paths.length; i++) {
        class_paths[i].style.fill = '#fff';
      }
      for (var k = 0; k < class_path_stroke.length; k++) {
        class_path_stroke[k].style.stroke = '#fff';
      }
      class_circle.style.opacity = '100%';
      for (var j = 0; j < 1500; j++) {
        class_line.style.strokeDashoffset = 1490 - j;
      }
    }
  });
</script>

</html>

M.jpg I.jpg

纯萌新，望各位大佬多多包涵，给个赞吧大哥们（秋梨膏！）😭

avatar
文章
阅读
粉丝
相关推荐
爬一下中秋月饼销量榜
3.0k阅读
 · 
35点赞
月饼太贵？那就用Three.js自己制作一个月饼，无死角观看！
14k阅读
 · 
79点赞
月饼都藏起来了，你能找到全部月饼吗？
7.3k阅读
 · 
26点赞
给灭霸点颜色看看
15k阅读
 · 
26点赞
2019年前端面试都聊啥？一起来看看
48k阅读
 · 
1.2k点赞
🎑 中秋你吃月饼了吗？[淘宝月饼销量分析]
2.9k阅读
 · 
49点赞
三面面试官：运行 npm run xxx 的时候发生了什么？
169k阅读
 · 
5.1k点赞
OpenAI 推出超神 ChatGPT 注册攻略来了
472k阅读
 · 
969点赞
《飞机大战吃月饼》：吃了1000+五仁月饼
2.2k阅读
 · 
14点赞

友情链接：