SVG 和 JQuery GIF 填充在 Firefox 上运行速度较慢

【问题标题】：SVG and JQuery GIF fill running slower on FirefoxSVG 和 JQuery GIF 填充在 Firefox 上运行速度较慢
【发布时间】：2019-07-19 08:48:53
【问题描述】：

我构建了一个交互式 SVG，其填充属性会随着悬停在每个组上而发生变化。它在 Chrome 和 IE 中的我的 Wordpress 站点上正常运行，但在 Firefox 中，设置为填充的 GIF 不连贯，整个 SVG 响应不灵敏。这里出了什么问题？

奇怪的是，当 Web Inspector 在我的网站上在 Firefox 中打开以及在 Firefox 中在此页面上运行代码 sn-p 时，它的性能更好。我的网站似乎出现了问题。

My Site

function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    var list = preloadImages.list;
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        list.push(img);
        img.src = array[i];
    }
}

preloadImages(['https://ijdonnelly.com/wp-content/uploads/2019/02/together.gif',
    'https://ijdonnelly.com/wp-content/uploads/2019/02/reflekt.gif',
    'https://ijdonnelly.com/wp-content/uploads/2019/02/harp.gif',
    'https://ijdonnelly.com/wp-content/uploads/2019/02/card.gif',
    'https://ijdonnelly.com/wp-content/uploads/2019/02/alien.gif',
    'https://ijdonnelly.com/wp-content/uploads/2019/02/a3.gif',
    'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png'
    ]);

var sOne = 'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png';
var lOne = 'https://ijdonnelly.com/wp-content/uploads/2019/02/card.gif';
  
var sTwo = 'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png';
var lTwo = 'https://ijdonnelly.com/wp-content/uploads/2019/02/together.gif';

var sThree = 'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png';
var lThree = 'https://ijdonnelly.com/wp-content/uploads/2019/02/reflekt.gif';

var sFour = 'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png';
var lFour = 'https://ijdonnelly.com/wp-content/uploads/2018/01/antmin-1.gif';

var sFive = 'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png';
var lFive = 'https://ijdonnelly.com/wp-content/uploads/2019/02/harp.gif';

var sSix = 'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png';
var lSix = 'https://ijdonnelly.com/wp-content/uploads/2019/02/alien.gif';

var sSeven = 'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png';
var lSeven = 'https://ijdonnelly.com/wp-content/uploads/2019/02/a3.gif';

$(function() {
    $('#one').hover(function() {
            var value = $('#img1 image');
            value.attr('xlink:href', lOne);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', lOne);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', lOne);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', lOne);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', lOne);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', lOne);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', lOne);
            
            $(".dOne").fadeIn("slow");
            
        },
        function() {
            var value = $('#img1 image');
            value.attr('xlink:href', sOne);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', sTwo);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', sThree);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', sFour);
            var value5 = $('#img5 image');
            value5.attr('xlink:href', sFive);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', sSix);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', sSeven);
            $('.dOne').fadeOut('fast');


        });
});

$(function() {
    $('#two').hover(function() {
            var value = $('#img1 image');
            value.attr('xlink:href', lTwo);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', lTwo);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', lTwo);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', lTwo);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', lTwo);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', lTwo);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', lTwo);
            
        },
        function() {
            var value = $('#img1 image');
            value.attr('xlink:href', sOne);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', sTwo);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', sThree);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', sFour);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', sFive);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', sSix);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', sSeven);
            

        });
});


$(function() {
    $('#three').hover(function() {
            var value = $('#img1 image');
            value.attr('xlink:href', lThree);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', lThree);
          
            var value3 = $('#img3 image');
            value3.attr('xlink:href', lThree);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', lThree);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', lThree);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', lThree);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', lThree);
            
        },
        function() {
            var value = $('#img1 image');
            value.attr('xlink:href', sOne);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', sTwo);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', sThree);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', sFour);
            var value5 = $('#img5 image');
            value5.attr('xlink:href', sFive);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', sSix);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', sSeven);

        });
});

$(function() {
    $('#four').hover(function() {
            var value = $('#img1 image');
            value.attr('xlink:href', lFour);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', lFour);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', lFour);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', lFour);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', lFour);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', lFour);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', lFour);
            
        },
        function() {
            var value = $('#img1 image');
            value.attr('xlink:href', sOne);
            var value2 = $('#img2 image');
            value2.attr('xlink:href', sTwo);
            var value3 = $('#img3 image');
            value3.attr('xlink:href', sThree);
            var value4 = $('#img4 image');
            value4.attr('xlink:href', sFour);
            var value5 = $('#img5 image');
            value5.attr('xlink:href', sFive);
            var value6 = $('#img6 image');
            value6.attr('xlink:href', sSix);
            var value7 = $('#img7 image');
            value7.attr('xlink:href', sSeven);

        });
});


$(function() {
    $('#five').hover(function() {
            var value = $('#img1 image');
            value.attr('xlink:href', lFive);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', lFive);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', lFive);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', lFive);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', lFive);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', lFive);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', lFive);
            
        },
        function() {
            var value = $('#img1 image');
            value.attr('xlink:href', sOne);
        
            var value2 = $('#img2 image');
            value2.attr('xlink:href', sTwo);

            var value3 = $('#img3 image');
            value3.attr('xlink:href', sThree);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', sFour);
            var value5 = $('#img5 image');
            value5.attr('xlink:href', sFive);
    
            var value6 = $('#img6 image');
            value6.attr('xlink:href', sSix);

            var value7 = $('#img7 image');
            value7.attr('xlink:href', sSeven);

        });
});

$(function() {
    $('#six').hover(function() {
            var value = $('#img1 image');
            value.attr('xlink:href', lSix);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', lSix);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', lSix);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', lSix);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', lSix);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', lSix);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', lSix);
            
        },
        function() {
            var value = $('#img1 image');
            value.attr('xlink:href', sOne);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', sTwo);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', sThree);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', sFour);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', sFive);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', sSix);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', sSeven);
            

        });
});

$(function() {
    $('#seven').hover(function() {
            var value = $('#img1 image');
            value.attr('xlink:href', lSeven);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', lSeven);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', lSeven);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', lSeven);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', lSeven);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', lSeven);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', lSeven);
            
        },
        function() {
            var value = $('#img1 image');
            value.attr('xlink:href', sOne);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', sTwo);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', sThree);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', sFour);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', sFive);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', sSix);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', sSeven);
            
        });
});
body {
  background-color: #edeeef;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="crys">
        <svg id="crystal" width="500px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1552.59 1053.68" xmlns:xlink="http://www.w3.org/1999/xlink">
            <a href="https://ijdonnelly.com/2018/01/22/a3-logo-animation/">
            <polyline points="154.59 396.52 154.59 291.75 77.29 239.37 0 291.75 0 396.52 0.27 396.7 0 396.7 0 658.44 0 694.63 0 763.21 77.29 815.59 154.59 763.21 154.59 658.44" fill="url(#img1)" id="one" />
            </a>
            <a href="https://ijdonnelly.com/2018/01/21/together-after-effects-short-film/">
          <polyline points="387.58 295.93 387.58 191.16 310.29 138.78 233 191.16 233 295.93 233.27 296.11 233 296.11 233 759.02 233 779.94 233 863.79 310.29 916.17 387.58 863.79 387.58 759.02" fill="url(#img2)" id="two" />
          </a>
          <a href="https://ijdonnelly.com/2018/01/21/afterglow-maya-premiere/">
          <polyline points="620.59 232.27 620.59 127.5 543.29 75.12 466 127.5 466 232.27 466.27 232.45 466 232.45 466 823.96 466 876.7 466 928.72 543.29 981.11 620.59 928.72 620.59 823.96" fill="url(#img3)" id="three" />
          </a>
          <a href="https://ijdonnelly.com/2017/10/03/scanning-electron-microscopy-to-vr-assets/">
          <polyline points="853.59 157.15 853.59 52.38 776.29 0 699 52.38 699 143.33 699 157.15 699 896.53 699 905.99 699 1001.3 776.29 1053.68 853.59 1001.3 853.59 896.53 853.06 896.17" fill="url(#img4)" id="four" />
          </a>
          <a href="https://ijdonnelly.com/2018/01/18/dslr-automata-max-msp/">
          <polyline points="1398 658.44 1398 763.21 1475.29 815.59 1552.59 763.21 1552.59 658.44 1552.32 658.26 1552.59 658.26 1552.59 396.52 1552.59 360.32 1552.59 291.75 1475.29 239.37 1398 291.75 1398 396.52" fill="url(#img5)" id="five" />
          </a>
          <a href="https://ijdonnelly.com/2017/10/03/melodi-musical-puzzle-game-unity-c/">
          <polyline points="1165 759.02 1165 863.79 1242.29 916.17 1319.59 863.79 1319.59 759.02 1319.32 758.84 1319.59 758.84 1319.59 295.93 1319.59 275.02 1319.59 191.16 1242.29 138.78 1165 191.16 1165 295.93" fill="url(#img6)" id="six" />
          </a>
          <a href="https://ijdonnelly.com/2018/01/18/musical-water-fountain/">
          <polyline points="932 822.68 932 927.45 1009.29 979.83 1086.59 927.45 1086.59 822.68 1086.32 822.5 1086.59 822.5 1086.59 231 1086.59 178.25 1086.59 126.23 1009.29 73.85 932 126.23 932 231" fill="url(#img7)" id="seven" />
          </a>
          <defs>
            <pattern id="img1" patternUnits="userSpaceOnUse" width="2000" height="2000" rotation="50deg">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
            <pattern id="img2" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
            <pattern id="img3" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
            <pattern id="img4" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
            <pattern id="img5" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
            <pattern id="img6" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
            <pattern id="img7" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
          </defs>
        </svg>
      </div>

【问题讨论】：

    标签： jquery firefox svg gif fill


    【解决方案1】：

    基本上，由于未优化代码，您会遇到性能滞后。考虑以下更改：

    1. 您不想为每个段单独使用完全相同的掩码；改用一个掩码并将其应用于所有段
    2. 为动画创建第二个蒙版
    3. 创建“水晶”的克隆并将其填充设置为第二个蒙版
    4. 默认隐藏克隆水晶
    5. 悬停时，将新图像应用到第二个蒙版并显示克隆的晶体
    6. 将过渡时间应用于遮罩褪色以获得更好的体验
    7. 不要对每个水晶使用单独的 JQuery 函数 - 一次性使用

    全部应用后 - 您将不会再注意到 Firefox 的延迟

    function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    var list = preloadImages.list;
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        list.push(img);
        img.src = array[i];
    }
}

var slides = [
  'https://ijdonnelly.com/wp-content/uploads/2019/02/card.gif',
  'https://ijdonnelly.com/wp-content/uploads/2019/02/together.gif',
  'https://ijdonnelly.com/wp-content/uploads/2019/02/reflekt.gif',
  'https://ijdonnelly.com/wp-content/uploads/2018/01/antmin-1.gif',
  'https://ijdonnelly.com/wp-content/uploads/2019/02/harp.gif',
  'https://ijdonnelly.com/wp-content/uploads/2019/02/alien.gif',
  'https://ijdonnelly.com/wp-content/uploads/2019/02/a3.gif',
  'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png'
]

preloadImages(slides);

var $mask = $('#img2 image');
var $clip = $('.clip');

$(function() {
    $('svg a').hover(
      function(){
        $mask.attr('xlink:href', slides[$(this).index()]);
        $clip.css('opacity', 1);
      },
      function(){
        $clip.css('opacity', 0);
      }
    );
      
});
    body {
  background-color: #edeeef;
}
.clip {
  opacity: 0;
  transition: 200ms opacity linear;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="crys">
        <svg id="crystal" width="500px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1552.59 1053.68" xmlns:xlink="http://www.w3.org/1999/xlink">
            <a href="https://ijdonnelly.com/2018/01/22/a3-logo-animation/">
            <polyline points="154.59 396.52 154.59 291.75 77.29 239.37 0 291.75 0 396.52 0.27 396.7 0 396.7 0 658.44 0 694.63 0 763.21 77.29 815.59 154.59 763.21 154.59 658.44" fill="url(#img1)" />
              <polyline points="154.59 396.52 154.59 291.75 77.29 239.37 0 291.75 0 396.52 0.27 396.7 0 396.7 0 658.44 0 694.63 0 763.21 77.29 815.59 154.59 763.21 154.59 658.44" fill="url(#img2)" class="clip" />
            </a>
            <a href="https://ijdonnelly.com/2018/01/21/together-after-effects-short-film/">
          <polyline points="387.58 295.93 387.58 191.16 310.29 138.78 233 191.16 233 295.93 233.27 296.11 233 296.11 233 759.02 233 779.94 233 863.79 310.29 916.17 387.58 863.79 387.58 759.02" fill="url(#img1)" />
              <polyline points="387.58 295.93 387.58 191.16 310.29 138.78 233 191.16 233 295.93 233.27 296.11 233 296.11 233 759.02 233 779.94 233 863.79 310.29 916.17 387.58 863.79 387.58 759.02" fill="url(#img2)" class="clip" />
          </a>
          <a href="https://ijdonnelly.com/2018/01/21/afterglow-maya-premiere/">
          <polyline points="620.59 232.27 620.59 127.5 543.29 75.12 466 127.5 466 232.27 466.27 232.45 466 232.45 466 823.96 466 876.7 466 928.72 543.29 981.11 620.59 928.72 620.59 823.96" fill="url(#img1)" />
            <polyline points="620.59 232.27 620.59 127.5 543.29 75.12 466 127.5 466 232.27 466.27 232.45 466 232.45 466 823.96 466 876.7 466 928.72 543.29 981.11 620.59 928.72 620.59 823.96" fill="url(#img2)" class="clip" />
          </a>
          <a href="https://ijdonnelly.com/2017/10/03/scanning-electron-microscopy-to-vr-assets/">
          <polyline points="853.59 157.15 853.59 52.38 776.29 0 699 52.38 699 143.33 699 157.15 699 896.53 699 905.99 699 1001.3 776.29 1053.68 853.59 1001.3 853.59 896.53 853.06 896.17" fill="url(#img1)" />
            <polyline points="853.59 157.15 853.59 52.38 776.29 0 699 52.38 699 143.33 699 157.15 699 896.53 699 905.99 699 1001.3 776.29 1053.68 853.59 1001.3 853.59 896.53 853.06 896.17" fill="url(#img2)" class="clip" />
          </a>
          <a href="https://ijdonnelly.com/2018/01/18/dslr-automata-max-msp/">
          <polyline points="1398 658.44 1398 763.21 1475.29 815.59 1552.59 763.21 1552.59 658.44 1552.32 658.26 1552.59 658.26 1552.59 396.52 1552.59 360.32 1552.59 291.75 1475.29 239.37 1398 291.75 1398 396.52" fill="url(#img1)" />
            <polyline points="1398 658.44 1398 763.21 1475.29 815.59 1552.59 763.21 1552.59 658.44 1552.32 658.26 1552.59 658.26 1552.59 396.52 1552.59 360.32 1552.59 291.75 1475.29 239.37 1398 291.75 1398 396.52" fill="url(#img2)" class="clip" />
          </a>
          <a href="https://ijdonnelly.com/2017/10/03/melodi-musical-puzzle-game-unity-c/">
          <polyline points="1165 759.02 1165 863.79 1242.29 916.17 1319.59 863.79 1319.59 759.02 1319.32 758.84 1319.59 758.84 1319.59 295.93 1319.59 275.02 1319.59 191.16 1242.29 138.78 1165 191.16 1165 295.93" fill="url(#img1)" />
            <polyline points="1165 759.02 1165 863.79 1242.29 916.17 1319.59 863.79 1319.59 759.02 1319.32 758.84 1319.59 758.84 1319.59 295.93 1319.59 275.02 1319.59 191.16 1242.29 138.78 1165 191.16 1165 295.93" fill="url(#img2)" class="clip" />
          </a>
          <a href="https://ijdonnelly.com/2018/01/18/musical-water-fountain/">
          <polyline points="932 822.68 932 927.45 1009.29 979.83 1086.59 927.45 1086.59 822.68 1086.32 822.5 1086.59 822.5 1086.59 231 1086.59 178.25 1086.59 126.23 1009.29 73.85 932 126.23 932 231" fill="url(#img1)" />
            <polyline points="932 822.68 932 927.45 1009.29 979.83 1086.59 927.45 1086.59 822.68 1086.32 822.5 1086.59 822.5 1086.59 231 1086.59 178.25 1086.59 126.23 1009.29 73.85 932 126.23 932 231" fill="url(#img2)" class="clip" />
          </a>
          <defs>
            <pattern id="img1" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
            <pattern id="img2" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
          </defs>
        </svg>
      </div>

    Codepen example

    【讨论】：

    • 这真是太棒了。非常感谢你！我不敢相信你也添加了淡入淡出；这是我长期以来一直在努力完成的事情！我迫不及待想要使用它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-12-13
    • 2016-01-07
    • 1970-01-01
    • 2018-07-10
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode