动画螺栓装载机

如何解决动画螺栓装载机

我在一个项目的中间，发现了这个螺栓装载机。看起来真的很好，但是我无法正常工作...

任何帮助都会很棒。

这是codepen https://codepen.io/aaroniker/pen/LYPrYqq

但是我只得到图片而没有动画。我正在使用Mvc，已将Scss保存在一个Scss文件中，这是下面的UI代码。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/css/TransitionCss.less" rel="stylesheet/less" />


</head>
<body>
    <div class="bolt">
        <svg viewBox="0 0 170 57" class="white left">
            <path d="M36.2701759,17.9733192 C-0.981139498,45.4810755 -7.86361824,57.6618438 15.6227397,54.5156241 C50.8522766,49.7962945 201.109341,31.1461782 161.361488,2"></path>
        </svg>
        <svg viewBox="0 0 170 57" class="white right">
            <path d="M36.2701759,2"></path>
        </svg>
        <div>
            <span></span>
        </div>
        <svg viewBox="0 0 112 44" class="circle">
            <path d="M96.9355003,2 C109.46067,13.4022454 131.614152,42 56.9906735,42 C-17.6328048,42 1.51790702,13.5493875 13.0513641,2"></path>
        </svg>
        <svg viewBox="0 0 70 3" class="line left">
            <path transform="translate(-2.000000,0.000000)" d="M2,1.5 L70,1.5"></path>
        </svg>
        <svg viewBox="0 0 70 3" class="line right">
            <path transform="translate(-2.000000,1.5"></path>
        </svg>
    </div>

    <small>Optimized for<br>Google Chrome Desktop</small>

    <!-- dribbble -->
    <a class="dribbble" href="https://dribbble.com/shots/7134825-Lightning-bolt-loader" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a>
</body>
</html>
<script>
    $('.bolt').each(function (e) {

        var bolt = $(this),div = $(this).children('div');

        bolt.addClass('animate');

        var tween = new TimelineMax({
            onComplete() {
                bolt.removeClass('animate');
                repeat();
            }
        }).set(div,{
            rotation: 360
        }).to(div,.7,{
            y: 80,rotation: 370
        }).to(div,.6,{
            y: -140,rotation: 20
        }).to(div,.1,{
            rotation: -24,y: 80
        }).to(div,.8,{
            ease: Back.easeOut.config(1.6),rotation: 0,y: 0
        });

        function repeat() {
            setTimeout(() => {
                bolt.addClass('animate');
                tween.restart();
            },400);
        }

    })

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>

如何解决动画螺栓装载机

相关推荐