HTML5/SVG就餐时钟指示动画

以餐桌为背景的时钟动画（一日三餐场景动画）

svg, clock, meal

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

//Classes
var arrowSmall = document.getElementsByClassName("arrowSmall");
var arrowSmallsh = document.getElementsByClassName("arrowSmallsh");
var arrowBig = document.getElementsByClassName("arrowBig");
var arrowBigsh = document.getElementsByClassName("arrowBigsh");

var person1 = document.getElementsByClassName("person1");
var person2 = document.getElementsByClassName("person2");
var person3 = document.getElementsByClassName("person3");
var person4 = document.getElementsByClassName("person4");
var person5 = document.getElementsByClassName("person5");
var peopleGroup = document.getElementsByClassName("peopleGroup");

var maskPoly = document.getElementsByClassName("maskPoly");

var plant = document.getElementsByClassName("plant");

//****** Animation
//Plant
var tlplant = new TimelineMax();
tlplant.staggerFromTo(plant, 2, {
    transformOrigin: "0% 100%",
    skewX: "1deg"
}, {
    skewX: "-2deg",
    repeat: -1,
    yoyo: true
}, 0.1);

//Clock Arrows
var tlarrowSmall = new TimelineMax({
    repeat: -1,
    yoyo: true,
    repeatDelay: 4.7
});
tlarrowSmall.fromTo([arrowSmall, arrowSmallsh], 1, {
    transformOrigin: "0% 100%",
    rotation: "0deg"
}, {
    rotation: "160deg",
    ease: "linear",
});

//Swoosh Animations
var tl = new TimelineMax({
    yoyo: true,
    repeat: -1,
    repeatDelay: 5
});
tl.fromTo('#star', .7, {
    x: -1200
}, {
    x: 0,
    ease: Sine.easeInOut
})

编译

CSS

HTML

<div class="container">
    <svg version="1.1" viewBox="0 0 1437.3 653.3" preserveAspectRatio="minXMinY meet">
        <style type="text/css">
            .st0 {
                opacity: 0.5;
                fill: url(#SVGID_1_);
            }
            .st1 {
                fill: #F1E6D4;
            }
            .st2 {
                fill: #DFCFBA;
            }
            .st3 {
                fill: #F2E7D5;
            }
            .st4 {
                opacity: 0.2;
                fill: #D7BBA7;
            }
            .st5 {
                opacity: 0.15;
                fill: #623E39;
            }
            .st6 {
                opacity: 0.5;
                fill: url(#SVGID_2_);
            }
            .st7 {
                fill: #EAE9D8;
            }
            .st8 {
                fill: #D3D2C3;
            }
            .st9 {
                fill: #D3CBC3;
            }
            .st10 {
                fill: #E6CC85;
            }
            .st11 {
                fill: #BB9278;
            }
            .st12 {
                fill: #F2CFAB;
            }
            .st13 {
                fill: #CDC1A9;
            }
            .st14 {
                fill: #BBAB97;
            }
            .st15 {
                fill: #67443C;
            }
            .st16 {
                opacity: 0.5;
                fill: #1F0700;
            }
            .st17 {
                fill: #925B4B;
            }
            .st18 {
                fill: #653D33;
            }
            .st19 {
                fill: none;
                stroke: #000000;
                stroke-miterlimit: 10;
            }
            .st20 {
                opacity: 0.35;
                fill: #1E0B01;
            }
            .st21 {
                fill: none;
                stroke: #BF9247;
                stroke-miterlimit: 10;
            }
            .st22 {
                fill: none;
                stroke: #996C46;
                stroke-miterlimit: 10;
            }
            .st23 {
                fill: #E0BEA1;
            }
            .st24 {
                opacity: 0.25;
            }
            .st25 {
                fill: #F9B66C;
            }
            .st26 {
                fill: #F8B46B;
            }
            .st27 {
                fill: #F8B16B;
            }
            .st28 {
                fill: none;
            }
            .st29 {
                fill: #B8977B;
            }
            .st30 {
                fill: #855346;
            }
            .st31 {
                opacity: 0.15;
            }
            .st32 {
                fill: #CCB295;
            }
            .st33 {
                fill: #BF9055;
            }
            .st34 {
                fill: #D4A265;
            }
            .st35 {
                fill: none;
                stroke: #623E39;
                stroke-width: 8;
                stroke-linecap: round;
                stroke-miterlimit: 10;
            }
            .st36 {
                fill: #B7967A;
            }
            .st37 {
                fill: #A79680;
            }
            .st38 {
                fill: #E1CAAD;
            }
            .st39 {
                fill: #EEE2D7;
            }
            .st40 {
                fill: #E8E4DB;
            }
            .st41 {
                fill: #624544;
            }
            .st42 {
                fill: #925B4D;
            }
            .st43 {
                fill: #5B5250;
            }
            .st44 {
                fill: #D0B094;
            }
            .st45 {
                fill: #B3987B;
            }
            .st46 {
                fill: #EBCBA7;
            }
            .st47 {
                fill: #3B231A;
            }
            .st48 {
                opacity: 0.35;
                fill: url(#SVGID_3_);
            }
            .st49 {
                fill: #8CA3A4;
            }
            .st50 {
                fill: #EFD3A8;
            }
            .st51 {
                fill: #BFC6B6;
            }
            .st52 {
                fill: #ABB6AF;
            }
            .st53 {
                opacity: 0.5;
                fill: #130001;
            }
            .st54 {
                fill: #E7CE9B;
            }
            .st55 {
                fill: #AF716E;
            }
            .st56 {
                fill: #B2CAD9;
            }
            .st57 {
                fill: #B86E69;
            }
            .st58 {
                fill: #734B42;
            }
            .st59 {
                fill: #85594F;
            }
            .st60 {
                fill: #8A5E52;
            }
            .st61 {
                opacity: 0.35;
                fill: #130001;
            }
            .st62 {
                fill: #5C403B;
            }
            .st63 {
                fill: #322626;
            }
            .st64 {
                fill: #D5C1A7;
            }
            .st65 {
                fill: #F6C679;
            }
            .st66 {
                fill: #F6BE78;
            }
            .st67 {
                fill: #CDB09B;
            }
            .st68 {
                fill: #995F5C;
            }
            .st69 {
                fill: #EBD8AF;
            }
            .st70 {
                fill: #DBBDA6;
            }
            .st71 {
                fill: #9B9B89;
            }
            .st72 {
                fill: #E0E5E8;
            }
            .st73 {
                fill: #6F4E4A;
            }
            .st74 {
                fill: #98B3BA;
            }
            .st75 {
                fill: #D5C2B5;
            }
            .st76 {
                fill: #EBD9B4;
            }
            .st77 {
                fill: #85A3AB;
            }
            .st78 {
                fill: #D4AE95;
            }
            .st79 {
                fill: #C5B39B;
            }
            .st80 {
                opacity: 0.3;
                fill: #C6D5DD;
            }
            .st81 {
                fill: #5D4746;
            }
            .st82 {
                opacity: 0.35;
                fill: url(#SVGID_4_);
            }
        </style>
        <defs>
            <clipPath id="clipping">
                <polygon id="star" points="388.6,0 0,652.3 1040,654.4 1437.3,4 " />
            </clipPath>

</g>

</g>

</g>

</g>

</g>
                    <path class="st67" d="M513.1,396.2c-0.4-0.4-1.2-1.2-2.3-1.3c-1-0.1-1.9,0.4-2.6,0.8c-2.2,1.4-4.9,3.2-5.6,5.5
				c-1,3.7,3.9,6.5,8.4,13.2c2.2,3.2,3.6,7.5,6.6,16.2c4.1,12.1,3.8,15.2,7.8,21.7c2.5,4.1,4.6,7.4,8.9,9c5.1,1.9,12.6,1.1,15.6-3.6
				c2.9-4.5,0.2-10.5-1.5-14.4c-1.3-2.9-1.9-3.1-7.9-11c-5.5-7.3-5.7-8.1-10.5-14.2c-5.1-6.4-4.4-4.9-6.2-7.5
				C523.7,410.5,516.5,399.8,513.1,396.2z" />
                    <path class="st70" d="M547.3,484.4c2-8.1,2.2-16.7,1-25.1c0-0.3-0.1-0.5-0.1-0.8c-1-6.3-2.7-12.5-5-18.5c-1.3-3.4-2.8-6.7-4.3-10
				c0.5,0.6,1,1.3,1.5,2c5.5,7.2,6.5,8,7.6,10.3c0,0,0,0,0,0c2.1,2.2,3.2,5.4,3.8,8.4C552.6,455,556.1,469.7,547.3,484.4z" />

</g>

</g>

</g>

</g>
                <g>

</g>
                <g>
                    <path class="st77" d="M877.6,129.5L877.6,129.5c0,0.5,0,1.1,0,1.6c0,0.2,0,0.4,0,0.5c0,0.6-0.1,1.2-0.1,1.8c0,0,0,0,0,0
				c0,0.5-0.1,1-0.1,1.4c0,0.3,0,0.6-0.1,0.9c-0.1,0.6-0.1,1.2-0.2,1.9h0c-4.1-0.8-8.3-1.2-12.5-1.1c0,0,0,0-0.1,0
				c-0.1,0-0.1,0-0.2,0c-3,0.1-6,0.4-9,1c-0.2-0.6-0.5-1.2-0.7-1.9c-0.2-0.5-0.4-1.1-0.7-1.6c-0.3-0.7-0.6-1.3-1-2.1
				c4.8,0.2,9.7-0.1,14.5-0.6c1.6-0.2,3.3-0.4,4.9-0.6C874.2,130.6,876.1,130.3,877.6,129.5z" />
                </g>
            </g>

</svg>

以餐桌为背景的时钟动画（一日三餐场景动画）

svg, clock, meal

编辑器支持Emmet

快捷键

以餐桌为背景的时钟动画（一日三餐场景动画）

svg, clock, meal

HTML5/SVG AB对比测试动画

HTML5/SVG圣诞节页面袜子加载动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：