钢琴拉丝动画效果-html代码-BFW代码库

钢琴拉丝动画效果

代码语言：html

所属分类：动画

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

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

    <style>
        body, html, svg {
            width: 100%;
            height: 100%;
            background: #000;
            overflow: hidden;
        }
    </style>

</head>
<body translate="no">
    <svg id="container" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>

    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
    <script>
        var lines = 40,
        colors = ['#F51720', '#FA26A0', '#F8D210', '#2FF3E0'];

        for (var i = 0; i < lines; i++) {
            var p = document.createElementNS("http://www.w3.org/2000/svg", "path"),
            c = i;
            if (i >= colors.length) c = i%colors.length; //makes it loop through colors array
            document.getElementById("container").appendChild(p);
            TweenMax.set(p, {
                attr: {
                    id: "line"+(i+1), class: 's', stroke: colors[c], 'stroke-width': rand(0.5, 4.5), fill: 'none', d: getPts.........完整代码请登录后点击上方下载按钮下载查看