HTML5/SVG化学科学实验动画 - 踏得网

实验室仪器（架子、器皿、管道）+蒸馏水生成动画

svg, science

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2542
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() { // wait for document ready

//science animation
    function science() {
        var liquidOrange = $('#liquidOrange'),
            liquidBlue = $('#liquidblue'),
            drop = $('#drop'),
            pops = $('#pops circle'),
            tube = $('#tube'),
            boile = $('#boile circle');

var master = new TimelineMax();
        master
            .add(animationA())
            .add(animationB());

function animationA() {
            var tl1 = new TimelineMax();
            tl1
                .to(liquidOrange, 1.5, {
                    x: '+=135',
                    y: '-=200',
                    ease: Power0.easeNone
                })
                .to(tube, 3, {
                    strokeDashoffset: 0,
                    ease: Sine.easeOut
                })
                .to(drop, 1.1, {
                    scale: '+=2',
                    y: 195,
                    ease: Expo.easeIn,
                    onComplete: function() {
                        tl1.set(drop, {
                            css: {
                                display: 'none'
                            }
                        });
                    }
                }, '-=.2')
                .to(liquidBlue, .2, {
                    css: {
                        fill: '#00FF1E'
                    }
                })
            return tl1;
        }

function animationB() {
            var tl1 = new TimelineMax({
                repeat: -1
            });
            tl1
                .staggerTo(pops, .5, {
                    opacity: 0,
                    scale: '-=.7',
                    y: -130,
                    ease: Power0.easeNone
                }, .4, 0)
                .staggerFromTo(boile, .5, {
                    opacity: 0,
                    ease: Power0.easeNone
                }, {
                    opacity: 1,
                    scale: 0,
                    y: '-=60',
                    ease: Power0.easeNone
                }, .1, 0);

return tl1;
        }

return master;
    }

science();

});

编译

CSS

HTML

<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<div class="v_lab" style="width: 350px; margin: 100px auto">
    <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="-987.099 -28.276 622.367 528.606">
        <circle id="drop" fill="#FF5B00" cx="-824" cy="138" r="3"></circle>
        <g id="pops" fill="#00FF1E">
            <circle cx="-831.189" cy="320" r="13.645" />
            <circle cx="-791.459" cy="320" r="10.835" />
            <circle cx="-836.607" cy="320" r="3.813" />
        </g>
        <path opacity=".8" fill="#E2E2E1" d="M-886.97 234.573c9.63 12.44 12.038 27.69 12.038 43.542v76.65c0 14.448 11.84 26.287 26.286 26.287h66.016c14.447 0 26.286-11.84 26.286-26.286v-75.848c0-16.052 2.208-31.503 12.04-44.144H-886.97v-.2z" />
        <path id="liquidblue" opacity=".9" fill="darkorchid" d="M-869.313 305.705v47.054c0 12.84 10.635 23.275 23.677 23.275h59.394c13.042 0 23.677-10.435 23.677-23.276v-47.055h-106.748z" />
        <g id="boile" fill="#FFF">
            <circle opacity="0" cx="-851.054" cy="365" r="5.418" />
            <circle opacity="0" cx="-777.899" cy="365" r="5.418" />
            <circle opacity="0" cx="-831.054" cy="365" r="10.244" />
            <circle opacity="0" cx="-802.902" cy="365" r="7.152" />
            <circle opacity="0" cx="-858.148" cy="365" r="7.152" />
            <circle opacity="0" cx="-810.054" cy="365" r="7.152" />
            <circle opacity="0" cx="-783.317" cy="365" r="2.89" />
        </g>
        <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="-439.842" y1="659.41" x2="-410.442" y2="659.41" gradientTransform="matrix(2.0066 0 0 -2.0066 7.837 1628.648)">
            <stop offset="0" stop-color="#FFF" />
            <stop offset="1" stop-color="#FFF" stop-opacity="0" />
        </linearGradient>
        <path opacity=".7" fill="url(#a)" d="M-815.74 240.994h-58.992c8.026 10.233 10.033 41.134 10.033 54.177v53.175c0 12.04 9.833 21.67 21.672 21.67h27.29v-129.02z" />
        <path opacity=".07" d="M-790.055 240.994h33.91c-8.025 10.233-9.83 41.134-9.83 54.177v53.175c0 11.838-9.833 21.67-21.672 21.67h-2.207v-129.02h-.2z" />
        <g fill="#2F382B">
            <path opacity=".27" d="M-926.3 278.315h172.564c2.608 0 4.615-2.006 4.615-4.615 0-2.61-2.007-4.615-4.616-4.615H-926.3c-2.61 0-4.615 2.006-4.615 4.615 0 2.61 2.207 4.615 4.615 4.615z" />
            <path d="M-944.96 272.296h192.628c2.61 0 4.615-2.006 4.615-4.615 0-2.607-2.006-4.614-4.615-4.614h-192.63c-2.607 0-4.614 2.006-4.614 4.615 0 2.61 2.007 4.616 4.615 4.616z" />
            <path d="M-934.928 152.304v306.803c0 4.414 3.612 7.825 7.826 7.825 4.415 0 7.826-3.61 7.826-7.825V152.304c0-4.415-3.612-7.826-7.826-7.826s-7.826 3.612-7.826 7.826z" />
            <path d="M-893.192 451.28h-66.016c-4.415 0-7.826 3.612-7.826 7.826 0 4.414 3.612 7.825 7.826 7.825h66.016c4.415 0 7.826-3.61 7.826-7.824s-3.41-7.825-7.826-7.825zm-46.953-198.247v25.483c0 6.822 5.82 12.44 13.042 12.44s13.042-5.618 13.042-12.44v-25.483c0-6.823-5.82-12.44-13.043-12.44-7.223.2-13.042 5.617-13.042 12.44z"
            />
            <path d="M-873.126 461.313h-106.147c-4.415 0-7.826 3.612-7.826 7.826 0 4.413 3.613 7.824 7.827 7.824h106.147c4.414 0 7.825-3.612 7.825-7.825 0-4.214-3.412-7.827-7.826-7.827z" />
        </g>
        <path fill="#2F382B" d="M-499.505 361.99v102.333c0 2.608 2.006 4.615 4.615 4.615 2.608 0 4.614-2.007 4.614-4.615V361.99c0-2.61-2.006-4.616-4.614-4.616-2.61 0-4.615 2.007-4.615 4.615z" />
        <path fill="#5E3315" d="M-449.14 116.788h-92.904l-8.026-29.295h108.956" />
        <path opacity=".8" fill="#E2E2E1" d="M-448.94 214.708v-84.676h.803c7.425 0 13.444-6.02 13.444-13.444 0-7.424-6.02-13.444-13.444-13.444h-94.51c-7.423 0-13.442 6.02-13.442 13.444 0 7.424 6.02 13.444 13.444 13.444h.803v84.676c-38.124 17.658-64.61 56.184-64.61 100.93 0 61.4 49.762 111.163 111.163 111.163 61.4 0 111.163-49.762 111.163-111.162-.202-44.746-26.688-83.273-64.812-100.93z"
        />
        <defs>
            <clipPath id="c">
                <path id="liquidOrange" d="M-377.975 635.884c7.022 0 12.842-5.818 12.842-12.842 0 0 .4-287.94.4-289.747 0-17.457-14.045-31.502-31.502-31.502-10.435 0-15.852 4.615-15.852 4.615-5.418 4.615-14.046 4.615-19.464 0 0 0-5.218-4.615-15.853-4.615-10.435 0-15.852 4.615-15.852 4.615-5.418 4.615-14.046 4.615-19.464 0 0 0-5.217-4.615-15.85-4.615-10.436 0-15.854 4.615-15.854 4.615-5.417 4.615-14.046 4.615-19.463 0 0 0-5.218-4.615-15.853-4.615-10.434 0-15.852 4.615-15.852 4.615-5.418 4.615-14.046 4.615-19.464 0 0 0-5.217-4.615-15.852-4.615-10.434 0-15.852 4.615-15.852 4.615-5.418 4.615-14.046 4.615-19.464 0 0 0-5.217-4.615-15.852-4.615-10.435 0-15.852 4.615-15.852 4.615-5.418 4.615-14.046 4.615-19.464 0 0 0-5.217-4.615-15.852-4.615-17.457 0-31.503 14.045-31.503 31.502 0 1.807.4 289.747.4 289.747 0 7.023 5.82 12.842 12.843 12.842h343.53z"
                />
            </clipPath>
        </defs>
        <path opacity=".9" clip-path="url(#c)" fill="#FF5B00" d="M-452.953 225.142V135.85h.803c6.822 0 12.24-5.62 12.24-12.24 0-6.822-5.618-12.24-12.24-12.24h-86.282c-6.822 0-12.24 5.618-12.24 12.24 0 6.822 5.62 12.24 12.24 12.24h.803v89.292c-34.913 16.053-58.99 51.167-58.99 92.1 0 55.984 45.347 101.533 101.53 101.533 55.983 0 101.532-45.348 101.532-101.532-.402-40.733-24.68-76.05-59.395-92.1z"
        />
        <linearGradient id="d" gradientUnits="userSpaceOnUse" x1="-271.541" y1="725.711" x2="-249.784" y2="725.711" gradientTransform="matrix(2.0066 0 0 -2.0066 7.837 1628.648)">
            <stop offset="0" stop-color="#FFF" />
            <stop offset="1" stop-color="#FFF" stop-opacity="0" />
        </linearGradient>
        <path opacity=".7" fill="url(#d)" d="M-537.027 130.633h43.742v83.674h-43.742v-83.674z" />
        <radialGradient id="e" cx="-239.517" cy="613.46" r="91.688" gradientTransform="matrix(2.0066 0 0 -2.0066 7.837 1628.648)" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#231F20" />
            <stop offset="1" stop-color="#231F20" stop-opacity="0" />
        </radialGradient>
        <path opacity=".1" fill="url(#e)" d="M-414.227 254.638c5.217 12.44 5.217 26.085 4.815 40.13-1.806 55.18-50.164 98.322-108.354 96.517-30.9-1.004-58.39-14.447-77.052-35.315 15.05 35.717 51.568 61.6 94.71 63.006 58.19 1.806 106.748-41.536 108.353-96.516.805-25.684-6.017-49.562-22.472-67.822z"
        />
        <linearGradient id="f" gradientUnits="userSpaceOnUse" x1="-411.149" y1="663.609" x2="-342.13" y2="663.609" gradientTransform="matrix(1.851 .775 .775 -1.851 -342.723 1815.617)">
            <stop offset="0" stop-color="#FFF" />
            <stop offset=".827" stop-color="#FFF" stop-opacity="0" />
        </linearGradient>
        <circle opacity=".7" fill="url(#f)" cx="-525.791" cy="295.371" r="69.226" />
        <path opacity=".6" fill="#FFF" d="M-551.676 116.788c0-6.22 5.017-9.43 11.438-9.43h90.897c6.22 0 11.437 3.01 11.437 9.43h-113.773z" />
        <path opacity=".07" d="M-541.844 130.432h92.903v7.424h-92.904v-7.424z" />
        <g fill="#2F382B">
            <path opacity=".27" d="M-592.208 365.6h192.63c2.608 0 4.614-2.005 4.614-4.614 0-2.608-2.006-4.614-4.615-4.614h-192.628c-2.608 0-4.615 2.006-4.615 4.614 0 2.61 2.007 4.615 4.615 4.615z" />
            <path d="M-610.87 359.58h230.755c2.608 0 4.615-2.006 4.615-4.614s-2.007-4.615-4.615-4.615H-610.87c-2.607 0-4.614 2.008-4.614 4.616-.2 2.608 2.006 4.615 4.615 4.615z" />
            <path d="M-395.164 357.976l10.032 116.38c0 2.61 2.007 4.616 4.615 4.616s4.615-2.007 4.615-4.615l-10.033-116.38c0-2.61-2.006-4.616-4.614-4.616s-4.614 2.007-4.614 4.616zm-208.682 0l-10.033 116.38c0 2.61 2.008 4.616 4.616 4.616s4.615-2.007 4.615-4.615l10.033-116.38c0-2.61-2.006-4.616-4.615-4.616-2.608 0-4.614 2.007-4.614 4.616z"
            />
        </g>
        <g>
            <path opacity=".8" fill="none" stroke="#E2E2E1" stroke-width="6" stroke-miterlimit="10" d="M-493.485 87.692V-11.23c0-7.625-6.22-14.046-14.046-14.046h-109.56c-7.625 0-14.046 6.22-14.046 14.046v57.187c0 7.625-6.22 14.046-14.046 14.046h-4.614c-7.625 0-14.046-6.22-14.046-14.046V-11.23c0-7.625-6.22-14.046-14.046-14.046h-3.01c-7.625 0-14.046 6.22-14.046 14.046v57.187c0 7.625-6.22 14.046-14.046 14.046h-4.816c-7.625 0-14.046-6.22-14.046-14.046v-56.184c0-7.625-6.22-14.046-14.046-14.046h-3.813c-7.626 0-14.047 6.22-14.047 14.046v56.184c0 7.625-6.22 14.046-14.046 14.046h-4.013c-7.625 0-14.046-6.22-14.046-14.046V-9.826c0-7.625-6.22-14.046-14.046-14.046h-3.612c-7.625 0-14.046 6.22-14.046 14.046v149.89"
            />
            <path id="tube" fill="none" stroke-dasharray="1029" stroke-dashoffset="1029" stroke="#FF5B00" stroke-width="6" stroke-miterlimit="10" d="M-493.485 87.692V-11.23c0-7.625-6.22-14.046-14.046-14.046h-109.56c-7.625 0-14.046 6.22-14.046 14.046v57.187c0 7.625-6.22 14.046-14.046 14.046h-4.614c-7.625 0-14.046-6.22-14.046-14.046V-11.23c0-7.625-6.22-14.046-14.046-14.046h-3.01c-7.625 0-14.046 6.22-14.046 14.046v57.187c0 7.625-6.22 14.046-14.046 14.046h-4.816c-7.625 0-14.046-6.22-14.046-14.046v-56.184c0-7.625-6.22-14.046-14.046-14.046h-3.813c-7.626 0-14.047 6.22-14.047 14.046v56.184c0 7.625-6.22 14.046-14.046 14.046h-4.013c-7.625 0-14.046-6.22-14.046-14.046V-9.826c0-7.625-6.22-14.046-14.046-14.046h-3.612c-7.625 0-14.046 6.22-14.046 14.046v149.89"
            />
        </g>
        <g>
            <path opacity=".8" fill="#E2E2E1" d="M-823.36 118.995c-6.42 0-11.638-5.217-11.638-11.638V76.255c0-6.42 5.217-11.638 11.638-11.638s11.638 5.217 11.638 11.638v30.9c0 6.623-5.217 11.84-11.638 11.84zm-28.895-10.434h-5.417c-1.806 0-3.21-1.404-3.21-3.21V77.06c0-1.806 1.404-3.21 3.21-3.21h5.417c1.806 0 3.21 1.404 3.21 3.21v28.493c0 1.606-1.404 3.01-3.21 3.01z"
            />
            <linearGradient id="g" gradientUnits="userSpaceOnUse" x1="-432.389" y1="766.16" x2="-429.18" y2="766.16" gradientTransform="matrix(2.0066 0 0 -2.0066 7.837 1628.648)">
                <stop offset="0" stop-color="#FFF" />
                <stop offset="1" stop-color="#FFF" stop-opacity="0" />
            </linearGradient>
            <path opacity=".7" fill="url(#g)" d="M-855.465 104.95h-2.006c-1.205 0-2.208-1.004-2.208-2.21V79.868c0-1.204 1.003-2.208 2.207-2.208h2.005c1.204 0 2.208 1.002 2.208 2.207v22.875c0 1.204-1.004 2.207-2.208 2.207z" />
            <path opacity=".8" fill="#E2E2E1" d="M-849.445 87.492h14.647v7.424h-14.647v-7.424z" />
            <linearGradient id="h" gradientUnits="userSpaceOnUse" x1="-722.492" y1="435.789" x2="-720.191" y2="435.789" gradientTransform="matrix(0 2.0066 2.0066 0 -1716.455 1538.273)">
                <stop offset="0" stop-color="#FFF" />
                <stop offset="1" stop-color="#FFF" stop-opacity="0" />
            </linearGradient>
            <path opacity=".7" fill="url(#h)" d="M-849.044 88.495h14.046v4.615h-14.046v-4.615z" />
            <linearGradient id="i" gradientUnits="userSpaceOnUse" x1="-419.014" y1="765.961" x2="-410.307" y2="765.961" gradientTransform="matrix(2.0066 0 0 -2.0066 7.837 1628.648)">
                <stop offset="0" stop-color="#FFF" />
                <stop offset="1" stop-color="#FFF" stop-opacity="0" />
            </linearGradient>
            <path opacity=".7" fill="url(#i)" d="M-824.163 114.58c-4.815 0-8.83-4.012-8.83-8.828V77.66c0-4.815 4.014-8.83 8.83-8.83s8.83 4.014 8.83 8.83v28.092c-.202 5.016-4.014 8.83-8.83 8.83z" />
            <path opacity=".07" d="M-849.445 87.692h3.21v7.424h-3.21v-7.424z" />
        </g>
    </svg>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>