HTML5 SVG深夜办公室场景特效

带一个手电筒照射的交互动画效果

svg, office, dark

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var flashlight = document.getElementById('illuminate');
flashlight.onmousemove = function(event) {
    this.style.backgroundPosition = (event.clientX - 300) + 'px ' + (event.clientY - 300) + 'px';
}

TweenMax.to('#secondhand', 60, {
    rotation: 360,
    ease: Linear.easeNone,
    repeat: -1,
    svgOrigin: "165 107"
})
TweenMax.to('#minutehand', 60 * 60, {
    rotation: 360,
    ease: Linear.easeNone,
    repeat: -1,
    svgOrigin: "165 107"
})
TweenMax.to('#hourhand', 60 * 60 * 60, {
    rotation: 360,
    ease: Linear.easeNone,
    repeat: -1,
    svgOrigin: "165 107"
})
TweenMax.fromTo('#steam1', 4, {
    y: 40
}, {
    y: -10,
    opacity: 0,
    repeat: -1
});
TweenMax.fromTo('#steam2', 3, {
    y: 30
}, {
    y: -10,
    opacity: 0,
    repeat: -1
});
TweenMax.fromTo('#steam3', 2, {
    y: 6
}, {
    y: -10,
    opacity: 0,
    repeat: -1
});

TweenMax.to("#start", .5, {
    morphSVG: {
        shape: "#end",
        shapeIndex: 1
    },
    y: 15,
    repeat: -1,
    yoyo: true,
    ease: Power0.easeInOut
});
TweenMax.fromTo("#start", 10.5, {
    x: -1000
}, {
    x: 1000,
    repeat: -1,
    yoyo: false,
    ease: Power0.easeInOut,
    repeatDelay: 3.5
});

编译

CSS

body {
    vertical-align: bottom;
    background-color: #f2f2b0;
}
svg.scene {
    left: 50%;
    bottom: 0;
    -webkit-transform: translatex(-50%);
    transform: translatex(-50%);
    width: 50%;
    max-height: 600px;
    position: absolute;
}
svg.scene #Zebra g {
    opacity: .25;
}
#end {
    visibility: hidden;
}
svg.cats {
    -webkit-filter: blur(1px);
    filter: blur(1px);
    position: fixed;
    bottom: 0;
    left: 0;
    height: auto;
    width: 100%;
}
.illuminate {
    z-index: 100;
    width: 100%;
    height: 100%;
    padding: 300px;
    position: fixed;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background: -webkit-radial-gradient(circle contain at 300px 300px, rgba(0, 0, 0, 0), rgba(29, 35, 40, 0.75), rgba(29, 35, 40, 0.96)) center center;
    background: radial-gradient(circle contain at 300px 300px, rgba(0, 0, 0, 0), rgba(29, 35, 40, 0.75), rgba(29, 35, 40, 0.96)) center center;
    background: -webkit-radial-gradient(300px 300px, circle contain, transparent, rgba(29, 35, 40, 0.75), rgba(29, 35, 40, 0.96)) center center;
    background: -ms-radial-gradient(300px 300px, circle contain, transparent, rgba(29, 35, 40, 0.75), rgba(29, 35, 40, 0.96)) center center;
}

HTML

<?xml version="1.0" encoding="utf-8" ?>

<svg class="scene" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
    <style type="text/css">
        .st0 {
            fill: none;
        }
        .st1 {
            fill: #F5F6E2;
        }
        .st2 {
            fill: #F2F2B0;
        }
        .st3 {
            fill: #A97C50;
            stroke: #594A42;
            stroke-width: 3;
            stroke-miterlimit: 10;
        }
        .st4 {
            opacity: 0.57;
            fill: url(#SVGID_1_);
            stroke: #594A42;
            stroke-width: 3;
            stroke-miterlimit: 10;
        }
        .st5 {
            opacity: 0.57;
            fill: url(#SVGID_2_);
            stroke: #594A42;
            stroke-width: 3;
            stroke-miterlimit: 10;
        }
        .st6 {
            opacity: 0.57;
            fill: url(#SVGID_3_);
            stroke: #594A42;
            stroke-width: 3;
            stroke-miterlimit: 10;
        }
        .st7 {
            fill: #E8E8E8;
            stroke: #676E73;
            stroke-width: 5;
            stroke-miterlimit: 10;
        }
        .st8 {
            fill: #B1D5E5;
            stroke: #676E73;
            stroke-width: 5;
            stroke-miterlimit: 10;
        }
        .st9 {
            fill: #EAF3E4;
            stroke: #676E73;
            stroke-width: 4;
            stroke-miterlimit: 10;
        }
        .st10 {
            fill: none;
            stroke: #676E73;
            stroke-width: 4;
            stroke-miterlimit: 10;
        }
        .st11 {
            fill: #676E73;
        }
        .st12 {
            fill: none;
            stroke: #676E73;
            stroke-miterlimit: 10;
        }
        .st13 {
            opacity: 0.3;
        }
        .st14 {
            fill: #B1D5E5;
        }
        .st15 {
            fill: #EAF3E4;
            stroke: #676E73;
            stroke-width: 3;
            stroke-miterlimit: 10;
        }
        .st16 {
            fill: #EAF3E4;
            stroke: #676E73;
            stroke-miterlimit: 10;
        }
        .st17 {
            fill: #676E73;
            stroke: #676E73;
            stroke-miterlimit: 10;
        }
        .st18 {
            fill: #EF452E;
        }
        .st19 {
            fill: #01B1A0;
        }
        .st20 {
            fill: #E8E8E8;
            stroke: #676E73;
            stroke-width: 3;
            stroke-miterlimit: 10;
        }
    </style>
    <pattern width="124.4" height="124.4" patternUnits="userSpaceOnUse" id="Zebra" viewBox="9.1 -267.9 124.4 124.4" style="overflow:visible;">
        <g>
            <rect x="9.1" y="-267.9" class="st0" width="124.4" height="124.4" />
            <g>
                <path d="M47-16.6c-1.1-3.1-3.3-15.5-4.7-21.8c-1.5-6.6,0-3.7-0.7-12.7c-0.7-9,0-11.3,0-14S41-73,43-83s1.2-15.8,4.5-26.1
				c3.3-10.3,1.7-26,1.7-26l-5.7-15c0,0-1,13.7-1,15.3c0,1.7,1.7,5.3,0.3,11.3c-1.3,6-1.3,19-2.7,21.7c-1.3,2.7-3.3,9.3-3.3,17.3
				s1,12.3,1,12.3c-3-1.7-4.3-8.3-4.3-12s-1.7-6.7,0-9.7c1.7-3-0.5-12.9-0.5-15.9s0.7-8,0-16c-0.2-2.8-0.1-7.8-1.7-10.1
				c-1.7-2.3-1.7-9-1.7-10.3c0-1.3-8.9,2.7-8.9,2.7s0.8,4.6,3.2,13c1.7,5.8-0.3,6.4,1.7,14.8c2,8.3,3.5,14.9,3.2,21.2
				c-0.3,6.3,2.3,21,2.3,26s2.3,4.3,0.7,10.7c-1.7,6.3-6.7,14.4-2.8,21.5c0.2,3.1-1.8,7.1-3.2,8.9s-7.3,6-4.5,10.1h8.3
				c0,0-0.2-1.1-0.1-3.9c0-2.7,1.1-4.1,2.4-7.1c1.3-3,1.8-6.7,1.3-9c3.1,2.8,5.9,5.7,6.4,11.4s3,5.6,3.4,6.8S47-16.6,47-16.6z" />
                <path d="M53.7-143.7c0.4,7.2,5.8,13.9,5.1,18.9c-0.7,5.3-7.3,11.3-7.3,23.3c0,12,3,10.3,4,21c1,10.7-2,4-3.7,15.3
				c-1.7,11.3-3.7,18-2.3,27.7c1.3,9.7,3,11.5,4.3,19c1.3,7.6-0.7,14.3,5.3,8c6-6.3,9.8-7.4,9.1-8.6c-2.9-5.2-7.5-20-4.8-28.4
				c2.7-8.3-2.9-11.3-0.6-20.9c2.3-9.7,10.7-26.3,10.7-29.3s1.2-13.7,2.2-20.1c1-6.3,0.7-11-4.7-20.3c-1.3-2.2-2.2-4-3-5.6
				L53.7-143.7z" />
                <path d="M75.8-143.8c1.1,2.2,3.1,5.8,4.8,15.3c1.9,10.5,2,5.8-0.6,21.8c-2.7,16,6,20,5,40.3c-1,20.3-13,22.6-12.4,32.6
				c0.7,10,9,31.7,10,32.7c1,1,5,3.3,5-4.3c0-7.7-2-18-0.7-24.7c1.3-6.7,6.3-18.7,7.3-24.3c1-5.7,4-6,7-16.7
				c3-10.7-4.6-12.2-7.6-21.9c-3-9.7-2.3-16-3.3-19.3c-1-3.3-2.5-10.2-2.7-17.1c-0.2-6.7-0.5-8.5-0.9-14.5L75.8-143.8z" />
                <path d="M113.2-39.7c1,1.8-1.2,11.2-1.5,21.1l-13.9,0.1c0.3-2,0.9-4.1,1.2-6.5c0.4-3,0-9.1,0-9.1c-0.3-7,7-18.7,10-26.3
				c3-7.7,6.8-15.2,6.8-24.6c0-9.3-9.5-20.1-13.8-31.1c-4.3-11-6.3-17.7-3-33.3c0,0,12.9-17.1,14.3-14.7c1.3,2.3-1.5,17.1-2.3,29.3
				c-0.5,7.1,4.4,13.1,5.1,16.1c0.7,3,0,7,1.7,15.7c1.7,8.7,11,19.7,10.3,28.3c-0.5,6.4,1.1,14.1-7,27
				C119.5-45.3,113.2-39.7,113.2-39.7z" />
                <path d="M134.7-144.1c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L134.7-144.1z" />
            </g>
            <g>
                <path d="M10.3-144.1c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L10.3-144.1z" />
            </g>
            <g>
                <path d="M134.7-267.8c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L134.7-267.8z" />
            </g>
            <g>
                <rect x="9.1" y="-267.9" class="st1" width="124.4" height="124.4" />
                <path d="M47-141c-1.1-3.1-3.3-15.5-4.7-21.8c-1.5-6.6,0-3.7-0.7-12.7c-0.7-9,0-11.3,0-14c0-2.7-0.7-8,1.3-18s1.2-15.8,4.5-26.1
				c3.3-10.3,1.7-26,1.7-26l-5.7-15c0,0-1,13.7-1,15.3c0,1.7,1.7,5.3,0.3,11.3c-1.3,6-1.3,19-2.7,21.7c-1.3,2.7-3.3,9.3-3.3,17.3
				s1,12.3,1,12.3c-3-1.7-4.3-8.3-4.3-12c0-3.7-1.7-6.7,0-9.7c1.7-3-0.5-12.9-0.5-15.9s0.7-8,0-16c-0.2-2.8-0.1-7.8-1.7-10.1
				c-1.7-2.3-1.7-9-1.7-10.3c0-1.3-8.9,2.7-8.9,2.7s0.8,4.6,3.2,13c1.7,5.8-0.3,6.4,1.7,14.8c2,8.3,3.5,14.9,3.2,21.2
				c-0.3,6.3,2.3,21,2.3,26s2.3,4.3,0.7,10.7c-1.7,6.3-6.7,14.4-2.8,21.5c0.2,3.1-1.8,7.1-3.2,8.9s-7.3,6-4.5,10.1h8.3
				c0,0-0.2-1.1-0.1-3.9c0-2.7,1.1-4.1,2.4-7.1c1.3-3,1.8-6.8,1.3-9c3.1,2.8,5.9,5.8,6.4,11.4s3,5.6,3.4,6.8S47-141,47-141z" />
                <path d="M53.7-268.1c0.4,7.2,5.8,13.9,5.1,18.9c-0.7,5.3-7.3,11.3-7.3,23.3c0,12,3,10.3,4,21c1,10.7-2,4-3.7,15.3
				c-1.7,11.3-3.7,18-2.3,27.7c1.3,9.7,3,11.5,4.3,19c1.3,7.6-0.7,14.3,5.3,8c6-6.3,9.8-7.4,9.1-8.6c-2.9-5.2-7.5-20-4.8-28.4
				c2.7-8.3-2.9-11.3-0.6-20.9c2.3-9.7,10.7-26.3,10.7-29.3s1.2-13.7,2.2-20.1c1-6.3,0.7-11-4.7-20.3c-1.3-2.2-2.2-4-3-5.6
				L53.7-268.1z" />
                <path d="M75.8-268.2c1.1,2.2,3.1,5.8,4.8,15.3c1.9,10.5,2,5.8-0.6,21.8c-2.7,16,6,20,5,40.3c-1,20.3-13,22.6-12.4,32.6
				c0.7,10,9,31.7,10,32.7s5,3.3,5-4.3c0-7.7-2-18-0.7-24.7c1.3-6.7,6.3-18.7,7.3-24.3c1-5.7,4-6,7-16.7c3-10.7-4.6-12.2-7.6-21.9
				c-3-9.7-2.3-16-3.3-19.3c-1-3.3-2.5-10.2-2.7-17.1c-0.2-6.7-0.5-8.5-0.9-14.5L75.8-268.2z" />
                <path d="M113.2-164.1c1,1.8-1.2,11.2-1.5,21.1L97.7-143c0.3-2,0.9-4.1,1.2-6.5c0.4-3,0-9.1,0-9.1c-0.3-7,7-18.7,10-26.3
				c3-7.7,6.8-15.2,6.8-24.6c0-9.3-9.5-20.1-13.8-31.1c-4.3-11-6.3-17.7-3-33.3c0,0,12.9-17.1,14.3-14.7c1.3,2.3-1.5,17.1-2.3,29.3
				c-0.5,7.1,4.4,13.1,5.1,16.1c0.7,3,0,7,1.7,15.7c1.7,8.7,11,19.7,10.3,28.3c-0.5,6.4,1.1,14.1-7,27
				C119.5-169.7,113.2-164.1,113.2-164.1z" />
                <path d="M134.7-268.5c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L134.7-268.5z" />
                <path d="M10.3-267.8c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.7-9.4L10.3-267.8z" />
            </g>
            <g>
                <path d="M10.3-268.5c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L10.3-268.5z" />
            </g>
            <g>
                <path d="M134.7-392.2c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L134.7-392.2z" />
            </g>
            <g>
                <path d="M47-265.4c-1.1-3.1-3.3-15.5-4.7-21.8c-1.5-6.6,0-3.7-0.7-12.7c-0.7-9,0-11.3,0-14s-0.7-8,1.3-18s1.2-15.8,4.5-26.1
				c3.3-10.3,1.7-26,1.7-26l-5.7-15c0,0-1,13.7-1,15.3c0,1.7,1.7,5.3,0.3,11.3c-1.3,6-1.3,19-2.7,21.7c-1.3,2.7-3.3,9.3-3.3,17.3
				s1,12.3,1,12.3c-3-1.7-4.3-8.3-4.3-12c0-3.7-1.7-6.7,0-9.7c1.7-3-0.5-12.9-0.5-15.9s0.7-8,0-16c-0.2-2.8-0.1-7.8-1.7-10.1
				c-1.7-2.3-1.7-9-1.7-10.3c0-1.3-8.9,2.7-8.9,2.7s0.8,4.6,3.2,13c1.7,5.8-0.3,6.4,1.7,14.8c2,8.3,3.5,14.9,3.2,21.2
				c-0.3,6.3,2.3,21,2.3,26s2.3,4.3,0.7,10.7c-1.7,6.3-6.7,14.4-2.8,21.5c0.2,3.1-1.8,7.1-3.2,8.9s-7.3,6-4.5,10.1h8.3
				c0,0-0.2-1.1-0.1-3.9c0-2.7,1.1-4.1,2.4-7.1c1.3-3,1.8-6.8,1.3-9c3.1,2.8,5.9,5.8,6.4,11.4s3,5.6,3.4,6.8S47-265.4,47-265.4z" />
                <path d="M53.7-392.5c0.4,7.2,5.8,13.9,5.1,18.9c-0.7,5.3-7.3,11.3-7.3,23.3c0,12,3,10.3,4,21c1,10.7-2,4-3.7,15.3
				c-1.7,11.3-3.7,18-2.3,27.7c1.3,9.7,3,11.5,4.3,19c1.3,7.6-0.7,14.3,5.3,8c6-6.3,9.8-7.4,9.1-8.6c-2.9-5.2-7.5-20-4.8-28.4
				c2.7-8.3-2.9-11.3-0.6-20.9c2.3-9.7,10.7-26.3,10.7-29.3s1.2-13.7,2.2-20.1c1-6.3,0.7-11-4.7-20.3c-1.3-2.2-2.2-4-3-5.6
				L53.7-392.5z" />
                <path d="M75.8-392.6c1.1,2.2,3.1,5.8,4.8,15.3c1.9,10.5,2,5.8-0.6,21.8c-2.7,16,6,20,5,40.3c-1,20.3-13,22.6-12.4,32.6
				c0.7,10,9,31.7,10,32.7s5,3.3,5-4.3c0-7.7-2-18-0.7-24.7c1.3-6.7,6.3-18.7,7.3-24.3c1-5.7,4-6,7-16.7c3-10.7-4.6-12.2-7.6-21.9
				c-3-9.7-2.3-16-3.3-19.3c-1-3.3-2.5-10.2-2.7-17.1c-0.2-6.7-0.5-8.5-0.9-14.5L75.8-392.6z" />
                <path d="M113.2-288.5c1,1.8-1.2,11.2-1.5,21.1l-13.9,0.1c0.3-2,0.9-4.1,1.2-6.5c0.4-3,0-9.1,0-9.1c-0.3-7,7-18.7,10-26.3
				c3-7.7,6.8-15.2,6.8-24.6c0-9.3-9.5-20.1-13.8-31.1c-4.3-11-6.3-17.7-3-33.3c0,0,12.9-17.1,14.3-14.7c1.3,2.3-1.5,17.1-2.3,29.3
				c-0.5,7.1,4.4,13.1,5.1,16.1c0.7,3,0,7,1.7,15.7c1.7,8.7,11,19.7,10.3,28.3c-0.5,6.4,1.1,14.1-7,27
				C119.5-294.1,113.2-288.5,113.2-288.5z" />
                <path d="M134.7-392.9c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L134.7-392.9z" />
                <path d="M10.3-392.2c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.7-9.4L10.3-392.2z" />
            </g>
            <g>
                <path d="M10.3-392.9c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L10.3-392.9z" />
            </g>
        </g>
    </pattern>
    <g id="Background">
        <rect class="st2" width="800" height="600" />
    </g>
    <g id="desk">
        <g>
            <rect x="78" y="454.8" class="st3" width="644.1" height="18.4" />
            <pattern id="SVGID_1_" xlink:href="#Zebra" patternTransform="matrix(1.1044 0 0 0.4374 758.3398 -4030.2043)">
            </pattern>
            <rect x="78" y="454.8" class="st4" width="644.1" height="18.4" />
        </g>
        <g>
            <g>

带一个手电筒照射的交互动画效果

svg, office, dark

编辑器支持Emmet

快捷键

带一个手电筒照射的交互动画效果

svg, office, dark

HTML5 SVG页面滚动时雾凇样式的背景图片揭露特效

HTML5 SVG 海底世界（浮游生物）/水下环境特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：