TweenMax实现文字沿路径运动动画效果-html代码-BFW代码库

TweenMax实现文字沿路径运动动画效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> Text along path svg</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #191919;
        }

        svg {
            width: 50vw;
            opacity: .7;
        }

        path {
            fill: transparent;
        }

        img {
            position: fixed;
            z-index: -1;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 30vw;
        }

        text {
            font-size: 8px;
            fill: transparent;
            stroke: #fff;
            stroke-width: 0.3;
            font-family: arial, cursive;
            font-weight: bold;
        }

        #text-1 {
            fill: #fff;
            stroke: none;
        }
    </style>

</head>
<body translate="no">

    <svg viewBox="0 0 211.9 104.6">
        <path id="curve-1" d="M41.3,71.4V30.9c0-7.4,6-13.5,13.5-13.5h101.7c7.4,0,13.5,6,13.5,13.5v43c0,7.4-6,13.5-13.5,13.5H54.8
            c-7.4,0-13.5-6-13.5-13.5" />
        <path id="curve-2" d="M176.6,33.8v42c0,9.5-7.7,17.2-17.2,17.2H51.8c-9.5,0-17.2-7.7-17.2-17.2V29c0-9.5,7.7-17.2,.........完整代码请登录后点击上方下载按钮下载查看