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=.........完整代码请登录后点击上方下载按钮下载查看