svg+gsap实现文件下载到文件夹动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+gsap实现文件下载到文件夹动画效果代码

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

<html>
<head>
    <style>
:root {
        --size: 100px;
        --size-folder-back: var(--size);
        --size-page-1: calc(var(--size) *0.55);
        --size-page-2: calc(var(--size) *0.65);
        --size-folder-front: var(--size);
        --ratio-page-1: 0.95;
        --ratio-page-2: 1.05;
        --ratio-page-2-height: 0.5;
        --ratio-page-2-offset: 0;
        --scale-folder: 1;
        --scale-pages: 0.7;
        --opacity-page-2: 1;
    }

        body {
            background-color: #F4F2F9;
            overflow: hidden;
        }

        .download,
        .folder-back,
        .page-1,
        .page-2,
        .folder-front,
        .background {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .download {
            width: var(--size);
            height: var(--size);
            cursor: pointer;
            filter: drop-shadow(rgba(0, 0, 0, 0.09) 4px 8px 12px) drop-shadow(rgba(0, 0, 0, 0.06) 2px 4px 6px) drop-shadow(rgba(0, 0, 0, 0.03) 1px 2px 3px);
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-tap-highlight-color: transparent;
        }

        .folder-back {
            width: var(--size-folder-back);
            height: var(--size-folder-back);
            transform-origin: 50% 100%;
            transform: translate(-50%, -50%) scaleY(var(--scale-folder));
        }

        .page-1 {
            width: calc(var(--size-page-1) * var(--ratio-page-1));
            height: calc(var(--size-page-1) / var(--ratio-page-1));
            border-radius: 8px;
            background-color: #F2EEF7;
            filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
            transform-origin: 50% 90%;
            transform: translate(-50%, -50%) translateY(calc((1 - var(--scale-pages)) * -65%)) scale(var(--scale-pages));
        }

        .page-2 {
            width: calc(var(--size-page-2) * var(--ratio-page-2));
            height: calc((var(--size-page-2) * var(--ratio-page-2-height)) / var(--ratio-page-2));
            border-radius: 10px;
            background-color: #FFFEFF;
            opacity: var(--opacity-page-2);
            filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
            transform: translate(-50%, -50%) translateY(17%) translateY(calc((1 - var(--scale-pages)) * -85%)) translateY(calc(var(--size) * -1.2 * var(--ratio-page-2-offset))) translateY(calc((1 - var(--ratio-page-2-height)) * -65%)) scale(var(--scale-pages));
        }

        .folder-front {
            width: var(--size-folder-front);
            height: var(--size-folder-front);
            transform-origin: 50% 100%;
            filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
            transform: translate(-50%, -50%) scaleY(calc(var(--scale-folder) * var(--scale-folder)));
        }

        .background {
            opacity: 0.25;
            pointer-events: none;
        }

        .dribbble {
            position: fixed;
            display: block;
            right: 20px;
            bottom: 20px;
        }
        .dribbble img {
            display: block;
            height: 28px;
        }

        .twitter {
            position: fixed;
            display: block;
            right: 64px;
            bottom: 14px;
        }
        .twitter svg {
            width: 32px;
            height: 32px;
            fill: #1da1f2;
        }
    </style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.min.js"></script>
</head>
<body>
    <div class="download" style="--scale-pages:1; --scale-folder:1;">
        <svg class="folder-back" viewBox="0 0 48 48">
            <path d="
                M  3.50  7.50
                C  3.50  5.29   5.28  3.50   7.49  3.50
                C 13.17  3.50  23.18  3.50  26.00  3.50
                C 30.00  3.50  28.00  6.00  32.00  6.00
                C 34.21  6.00  37.87  6.00  40.71  6.00
                C 42.93  6.00  44.73  7.82  44.71 10.04
                L 44.54 25.04
                C 44.52 27.24  42.74 29.00  40.54 29.00
                H  7.50
                C  5.29 29.00   3.50 27.21   3.50 25.00
                V  7.50
                Z
                " fill="#32AF75"></path>
        </svg>
        <div class="page-1"></div>
        <div class="page-2"></div>
        <svg class="folder-front" viewBox="0 0 48 48">
            <defs>
                <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:#47DB99;stop-opacity:1"></stop>
                    <stop offset="100%" style="stop-color:#2EA16D;stop-opacity:1"></stop>
                </linearGradient>
            </defs>
            <path d="
                M  2.36 24.31
                C  2.17 23.09   3.11 22.00   4.34 22.00
                H 40.90
                C 41.80 22.00  42.33 23.00  41.83 23.75
                L 41.40 24.40
                C 41.16 24.76  41.16 25.24  41.40 25.60
                V 25.60
                C 41.73 26.10  42.40 26.23  42.90 25.90
                L 43.50 25.50
                V 25.50
                C 44.75 24.88  46.17 25.93  45.94 27.31
                L 43.57 41.17
                C 43.24 43.09  41.57 44.50  39.63 44.50
                H  8.93
                C  6.95 44.50   5.28 43.06   4.97 41.11
                L  2.36 24.31
                Z
                " fill="url(#gradient)"></path>
        </svg>
    </div>

    <!-- background -->
    <svg class="background" width="800" height="600" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: translate(-400px, -300px);">
        <path d="M145.794 161.461l-.597 15.577c-.059 1.538-1.762 2.436-3.065 1.615l-13.191-8.305c-1.303-.821-1.229-2.744.133-3.462l.........完整代码请登录后点击上方下载按钮下载查看