svg+TweenMax实现路径动画效果代码-html代码-BFW代码库

svg+TweenMax实现路径动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+TweenMax实现路径动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            text-align: center;
            background-color: #030226;
            color: white;
            font-size: 2rem;
        }

        h1 a {
            color: hotpink;
        }

        svg {
            background-color: #030226;
        }

        .whitePath, .bluePath, .greenPath, .redPath {
            fill: none;
            stroke-width: 5px;
            stroke-linecap: round;
            stroke-dashoffset: 0;
            stroke-dasharray: 0, 800;
        }

        .whitePath {
            stroke: #FBFEF9;
        }

        .bluePath {
            stroke: #F3A712;
        }

        .greenPath {
            stroke: #DB2B39;
        }

        .redPath {
            stroke: #456990;
        }

        .circle {
            fill: none;
            stroke: #FBFEF9;
            stroke-width: 3px;
        }

@keyframes colorSwitch {
            0% {
                stroke: #FBFEF9;
            }
            20% {
                stroke: #F3A712;
            }
            40% {
                stroke: #DB2B39;
            }
            50% {
                stroke: #456990;
            }
        }
    </style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
</head>
<body>
  
    <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <filter id="f4" x="-50%" y="-50%" width="200%" height="200%">
            <feOffset result="offOut" in="SourceGraphic" dx="0" dy="20"></feOffset>
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="7"></feGaussianBlur>
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
        </filter>
        <path filter="url(#f4)" class="redPath" id="redPath4" d="M100 250 L 200 100 L 300 300 L 400 150" style="stroke-dasharray: 22.0719, 800; stroke-dashoffset: -510px;"></path>
        <path filter="url(#f4)" class="greenPath" id="greenPath4" d="M100 250 L 200 100 L 300 300 L 400 150" style="stroke-dasharray: 30.0237, 800; stroke-dashoffset: -483px;"></path>
        <path filter="url(#f4)" class="bluePath" id="bluePath4" d="M100 250 L 200 100 L 300 300 L 400 150" style="stroke-dasharray: 42.1062, 800; stroke-dashoffset: -443px;"></path>
        <path filter="url(#f4)" class="whitePath" id="whitePath4" d="M100 250 L 200 100 L 300 300 L 400 150" style="stroke-dasharray: 61.1836, 800; stroke-dashoffset: -379px;"></path>

        <g id="circle14" class="circle" data-svg-origin="160 39" style="opacity: 0; transform: matrix3d(1.02335, 0, 0, 0, 0, 1.02335, 0, 0, 0, 0, 1, 0, -4.73225, -2.46731, 0, 1); animation: 2s ease 0s 1 normal none running colorSwitch;">
            <circle filter="url(#f4)" cx="200" cy="100" r="25"></circle>
            <circle filter="url(#f4)" cx="230" cy="40" r="1"></circle>
            <path filter="url(#f4)" class="redPath" d="M160 50 L 165 50 L 160 55 L 160 50"></path>
            <path filter="url(#f4)" class="greenPath" d="M260 150 L 165 150 L 160 155 L 160 150"></path>
        </g>
        <g id="circle24" class="circle" data-svg-origin="265 265" style="opacity: 0.9711; transform: matrix3d(1.37399, 0, 0, 0, 0, 1.37399, 0, 0, 0, 0, 1, 0, -112.414, -112.414, 0, 1); animation: 1.2s ease 0s 1 normal none running colorSwitch;">
            <circle filter="url(#f4)" cx="330" cy="330" r="1"></circle>
            <circle filter="url(#f4)" cx="300" cy="300" r="35"></circle>
        </g>
    </svg><script>
        paths(4);
        circles(4);

        function paths(nb) {
            movePath('whitePath' + nb, 0);
            movePath('bluePath' + nb, 0.1);
            movePath('greenPath' + nb, 0.2);
            movePath('redPath' + nb, 0.3);
        }
        function movePath(id, delay) {
            const ease = [Power3.easeIn,
                Power3.easeOut];
            var tl = new TimelineLite({
                paused: false,
                onComplete: function() {
                    this.restart();
                }
            });
            const path = document.getElementById(id);
            tl.add(
                TweenLite.set(path, {
                    strokeDashoffset: '0',
                    strok.........完整代码请登录后点击上方下载按钮下载查看