HTML5/SVG棒棒糖山林雪景

Lollipop Forest，圣诞节动画：七彩茅屋，棒棒糖森林，雪山和圣诞老人驾乘由9只驯鹿拉的雪橇动画。

html5, 圣诞节

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// this is the declaration section of all main elements used
const tmax_options = {  
  repeat: -1,
  yoyo: true
};
const treeTime = 1;
const treeTimeline = new TimelineMax(tmax_options)
const tween_options_to = {
        css: {
          transform: 'scale(0)',
          transformOrigin: 'center center'
        },
        ease: Cubic.easeInOut,
        force3D: true
      };  
const windowTime = new TimelineMax(tmax_options) 
const moonPath = MorphSVGPlugin.pathDataToBezier("#moonPath", {align:"#moon"})
const no = { repeat : 0 }
const santa = new TimelineMax(no)
const moon = new TimelineMax(no)
const snow = new TimelineMax({repeat : -1})
// a few simple functions to help with posittioning 
function santaPath(){
 return $(window).width()
}
function snowDrift() {
  return $(window).height()
}
function fontSize() {
  let path = santaPath() / 10
  if(path > 185){
    return 185
  }else{
    return path
  }
}
function centerText() {  
    let minus = fontSize() / 1.8 
    return santaPath() / 4 - minus
}
// +++++++++++ this is where all the magic starts to happen +++++++++
// this is to set the moon on the center of it's path
TweenMax.set($('#moon'), {xPercent:-50, yPercent:-50}) 
// This is the begining of the santa text timeline. 
santa.to($('.santa'), 10, {left: santaPath(), ease: Power0.easeNone, width: '20%', top: '20px'})
  .to($('.santa'), 2.5, {rotationY:"+=180", visibility: "hidden"})
  .to($('.santa'), 8, {left : -santaPath(), visibility: "visible", ease: Power0.easeNone, width: '32%', top: '30px' })
  .to($('.santa'), 1.5, {rotationY : "+=180", visibility: "hidden"})
  .to($('.santa'), 6, {left : santaPath(), visibility: "visible", ease: Power0.easeNone, width: '45%', top: '40px' })
  .to($('.santa'),0.1, {display : "none" })
    // this is the text part
  .to($('#merry'), 2, {ease: Sine.easeOut, display : "block", left : centerText(), fontSize : fontSize()})
  .to($('#merry'), 0.5, {fontSize:'8px', opacity: '0', ease: Sine.easeOut}, '+=5')
// Tree timeline Loop === back and forth side to side
treeTimeline.to($('.red'), treeTime, {rotation:10,transformOrigin:"50% 50%", ease:Power0.easeNone},0)
            .to($('.green'), treeTime, {rotation:-8, transformOrigin:"50% 50%", ease:Power0.easeNone},0)
// set the moon on it's path
moon.to($('#moon'), 90, {bezier:{values:moonPath, type:"cubic"}})
// turns the light on in the house.
windowTime.to($('.windows'), 2.5, { fill: '#ffff99' }, '+=4')
// animates the snow fall
snow.to($('.snow'), 40, {ease: Power0.easeNone, top : "+=" + snowDrift() + "px", height : "100%" })
console.log(`font-size: ${fontSize()}`)
console.log(`center-text: ${centerText()}`)

编译

CSS

HTML

<linearGradient id="XMLID_556_" gradientUnits="userSpaceOnUse" x1="304.5689" y1="116.7058" x2="301.5966" y2="-173.9645" gradientTransform="matrix(1 0 0 -1 0 562)">
                    <stop offset="0.2553" style="stop-color:#CCE0F4" />
                    <stop offset="0.2901" style="stop-color:#BAD9F1" />
                    <stop offset="0.3946" style="stop-color:#8BC7E9" />
                    <stop offset="0.4989" style="stop-color:#64B7E3" />
                    <stop offset="0.6012" style="stop-color:#45ABDE" />
                    <stop offset="0.7009" style="stop-color:#30A3DA" />
                    <stop offset="0.7968" style="stop-color:#229ED8" />
                    <stop offset="0.8848" style="stop-color:#1E9CD7" />
                    <stop offset="0.934" style="stop-color:#1D9AD6" />
                    <stop offset="0.9518" style="stop-color:#1793D1" />
                    <stop offset="0.9643" style="stop-color:#0E88CA" />
                    <stop offset="0.9745" style="stop-color:#0177BF" />
                    <stop offset="0.9754" style="stop-color:#0075BE" />
                    <stop offset="0.983" style="stop-color:#0074BC" />
                    <stop offset="0.9858" style="stop-color:#006FB5" />
                    <stop offset="0.9877" style="stop-color:#0067AA" />
                    <stop offset="0.9893" style="stop-color:#005C99" />
                    <stop offset="0.9895" style="stop-color:#005B97" />
                </linearGradient>
                <path id="XMLID_524_" class="st42" d="M1050.3,574c0,80.5-524.9,162.9-723,162.9s-771-82.4-771-162.9s578.8-74.2,772.6-115.1
			C538.7,414.5,1050.3,493.5,1050.3,574z" />
                <polygon id="XMLID_507_" class="st10" points="284.9,466.1 318.2,460.8 357.3,560 314.8,560 		" />
                <g id="red-tree_5_">
                    <path id="r-trunk_5_" class="st7" d="M221.5,527.5l-33.2,20c-0.7,0-0.7,0.7-0.7,1.3v43.2c0,0.7-0.7,1.3-1.3,1.3h-2.7
				c-0.7,0-1.3-0.7-1.3-1.3v-29.3c0-0.7,0-0.7-0.7-1.3l-29.2-24.6c-0.7-0.7-0.7-1.3,0-2l0,0c0.7-0.7,1.3-0.7,2,0l25.2,21.9
				c0.7,0.7,2.7,0,2.7-1.3v-47.9c0-0.7,0.7-1.3,1.3-1.3h2.7c0.7,0,1.3,0.7,1.3,1.3v35.3c0,1.3,1.3,2,2,1.3l30.5-18.6
				c0.7-0.7,1.3,0,2,0.7l0,0C222.2,526.2,222.2,526.9,221.5,527.5z" />
                    <g id="red_5_" class="red">
                        <g id="r-top_5_">
                            <ellipse id="top_50_" class="st8" cx="185" cy="503.6" rx="29.9" ry="29.9" />
                            <path id="top_49_" class="st39" d="M185,503.6l20.6,20.6l0,0c-6,6-13.9,8.6-21.2,8.6L185,503.6z" />
                            <path id="top_48_" class="st39" d="M185,503.6l-21.2,20.6l0,0c-5.3-6-8.6-13.3-8-20.6H185z" />
                            <path id="top_47_" class="st39" d="M185,503.6l21.2-20.6l0,0c5.3,6,6.6,13.3,7.3,20.6H185z" />
                            <path id="top_46_" class="st39" d="M185,503.6l-20.6-21.3l0,0c6-6,13.3-9.3,20.6-8.6V503.6z" />
                        </g>
                        <g id="r-left_5_">
                            <ellipse id="left_50_" class="st8" cx="151.2" cy="533.5" rx="15.3" ry="15.3" />
                            <path id="left_49_" class="st39" d="M151.2,534.2l8,13.3l0,0c-4,2.7-8,2.7-11.9,2L151.2,534.2z" />
                            <path id="left_48_" class="st39" d="M151.2,533.5l-13.3,8l0,0c-2-4-2.7-8-2-11.3L151.2,533.5z" />
                            <path id="left_47_" class="st39" d="M151.2,533.5l13.3-8l0,0c2,4,3.3,8,2,11.3L151.2,533.5z" />
                            <path id="left_46_" class="st39" d="M151.2,533.5l-8-13.3l0,0c4-2,7.3-3.3,11.3-2L151.2,533.5z" />
                        </g>
                        <g id="r-right_5_">
                            <ellipse id="right_50_" class="st8" cx="222.2" cy="524.9" rx="14.6" ry="14.6" />
                            <path id="right_49_" class="st39" d="M222.2,524.9l13.3,7.3l0,0c-2,4-5.3,6-9.3,7.3L222.2,524.9z" />
                            <path id="right_48_" class="st39" d="M222.2,524.9l-7.3,13.3l0,0c-3.3-2-6-5.3-6.6-8.6L222.2,524.9z" />
                            <path id="right_47_" class="st39" d="M222.2,524.9l7.3-13.3l0,0c3.3,2,6,4.7,7.3,8.6L222.2,524.9z" />
                            <path id="right_46_" class="st39" d="M222.2,524.9l-13.3-7.3l0,0c2-3.3,4.6-6,8.6-7.3L222.2,524.9z" />
                        </g>
                    </g>
                </g>
                <g id="green-tree_12_">
                    <path id="g-trunk_12_" class="st7" d="M25.4,500.7L25.4,500.7c0.7-0.7,1.4-0.7,2.2-0.7l29.7,18.2c0.7,0.7,2.2,0,2.2-1.5v-34.1
				c0-0.7,0.7-1.5,1.4-1.5h2.9c0.7,0,1.4,0.7,1.4,1.5V529c0,1.5,1.4,2.2,2.2,0.7L92,508.7c0.7-0.7,1.4-0.7,2.2,0l0,0
				c0.7,0.7,0.7,1.5,0,2.2l-28.2,24l-0.7,0.7v28.3c0,0.7-0.7,1.5-1.4,1.5h-2.9c-0.7,0-1.4-0.7-1.4-1.5v-42.1c0-0.7,0-0.7-0.7-1.5
				l-32.6-19.6C25.4,502.2,25.4,500.7,25.4,500.7z" />
                    <g id="green_12_" class="green">
                        <g id="g-right_12_">
                            <ellipse id="left_125_" class="st8" cx="94.1" cy="510.1" rx="15.2" ry="15.2" />
                            <path id="left_124_" class="st9" d="M97.8,524.7c-3.6,1.5-8,0.7-11.6-1.5l0,0l7.2-13.1L97.8,524.7z" />
                            <path id="left_123_" class="st9" d="M108.6,506.5c1.4,3.6,0,7.3-1.4,11.6l0,0l-13-8L108.6,506.5z" />
                            <path id="left_122_" class="st9" d="M78.9,513.8c-1.4-3.6,0-7.3,1.4-11.6l0,0l13,8L78.9,513.8z" />
                            <path id="left_121_" class="st9" d="M90.5,495.6c3.6-1.5,7.2,0,10.9,2.2l0,0l-8,13.1L90.5,495.6z" />
                        </g>
                        <g id="g-left_12_">
                            <ellipse id="right_125_" class="st8" cx="25.4" cy="500.7" rx="14.5" ry="14.5" />
                            <path id="right_124_" class="st9" d="M21,514.5c-3.6-0.7-7.2-3.6-8.7-7.3l0,0l12.3-7.3L21,514.5z" />
                            <path id="right_123_" class="st9" d="M39.1,504.3c-0.7,3.6-3.6,6.5-6.5,8.7l0,0l-7.2-12.3L39.1,504.3z" />
                            <path id="right_122_" class="st9" d="M10.9,496.4c0.7-3.6,3.6-6.5,6.5-8.7l0,0l7.2,12.3L10.9,496.4z" />
                            <path id="right_121_" class="st9" d="M29.7,486.2c3.6,0.7,6.5,3.6,8.7,7.3l0,0l-12.3,7.3L29.7,486.2z" />
                        </g>
                        <g id="g-top_12_">
                            <ellipse id="top_125_" class="st8" cx="61.6" cy="481.1" rx="29" ry="29" />
                            <path id="top_124_" class="st9" d="M61.6,510.1c-7.2,0-15.2-2.9-21-8.7l0,0l20.3-20.3L61.6,510.1z" />
                            <path id="top_123_" class="st9" d="M90.5,481.1c0.7,7.3-2.9,13.8-8,20.3l0,0l-21-20.3H90.5z" />
                            <path id="top_122_" class="st9" d="M32.6,481.1c0.7-7.3,2.2-14.5,7.2-20.3l0,0l21,20.3H32.6z" />
                            <path id="top_121_" class="st9" d="M60.8,452.1c7.2-0.7,13.8,2.9,20.3,8l0,0l-20.3,21.1V452.1z" />
                        </g>
                    </g>
                </g>
                <g id="green-tree_5_">
                    <path id="g-trunk_5_" class="st7" d="M746.4,461.4L746.4,461.4c0.8-0.8,1.5-0.8,2.3-0.8l31.4,19.2c0.8,0.8,2.3,0,2.3-1.5v-36
				c0-0.8,0.8-1.5,1.5-1.5h3.1c0.8,0,1.5,0.8,1.5,1.5v49.1c0,1.5,1.5,2.3,2.3,0.8l26-22.2c0.8-0.8,1.5-0.8,2.3,0l0,0
				c0.8,0.8,0.8,1.5,0,2.3l-29.8,25.3l-0.8,0.8v29.9c0,0.8-0.8,1.5-1.5,1.5h-3.1c-0.8,0-1.5-0.8-1.5-1.5v-44.5c0-0.8,0-0.8-0.8-1.5
				l-34.4-20.7C746.4,462.9,746.4,461.4,746.4,461.4z" />
                    <g id="green_5_" class="green">
                        <g id="g-right_5_">
                            <ellipse id="left_45_" class="st8" cx="819" cy="471.4" rx="16.1" ry="16.1" />
                            <path id="left_44_" class="st9" d="M822.9,486.7c-3.8,1.5-8.4,0.8-12.2-1.5l0,0l7.6-13.8L822.9,486.7z" />
                            <path id="left_43_" class="st9" d="M834.3,467.5c1.5,3.8,0,7.7-1.5,12.3l0,0l-13.8-8.4L834.3,467.5z" />
                            <path id="left_42_" class="st9" d="M803,475.2c-1.5-3.8,0-7.7,1.5-12.3l0,0l13.8,8.4L803,475.2z" />
                            <path id="left_41_" class="st9" d="M815.2,456c3.8-1.5,7.6,0,11.5,2.3l0,0l-8.4,13.8L815.2,456z" />
                        </g>
                        <g id="g-left_5_">
                            <ellipse id="right_45_" class="st8" cx="746.4" cy="461.4" rx="15.3" ry="15.3" />
                            <path id="right_44_" class="st9" d="M741.8,476c-3.8-0.8-7.6-3.8-9.2-7.7l0,0l13-7.7L741.8,476z" />
                            <path id="right_43_" class="st9" d="M760.9,465.2c-0.8,3.8-3.8,6.9-6.9,9.2l0,0l-7.6-13L760.9,465.2z" />
                            <path id="right_42_" class="st9" d="M731.1,456.8c0.8-3.8,3.8-6.9,6.9-9.2l0,0l7.6,13L731.1,456.8z" />
                            <path id="right_41_" class="st9" d="M751,446c3.8,0.8,6.9,3.8,9.2,7.7l0,0l-13,7.7L751,446z" />
                        </g>
                        <g id="g-top_5_">
                            <ellipse id="top_45_" class="st8" cx="784.6" cy="440.7" rx="30.6" ry="30.7" />
                            <path id="top_44_" class="st9" d="M784.6,471.4c-7.6,0-16.1-3.1-22.2-9.2l0,0l21.4-21.5L784.6,471.4z" />
                            <path id="top_43_" class="st9" d="M815.2,440.7c0.8,7.7-3.1,14.6-8.4,21.5l0,0l-22.2-21.5H815.2z" />
                            <path id="top_42_" class="st9" d="M754,440.7c0.8-7.7,2.3-15.3,7.6-21.5l0,0l22.2,21.5H754z" />
                            <path id="top_41_" class="st9" d="M783.8,410c7.6-0.8,14.5,3.1,21.4,8.4l0,0l-21.4,22.2V410z" />
                        </g>
                    </g>
                </g>
                <g id="red-tree_14_">
                    <path id="r-trunk_14_" class="st7" d="M643.8,497l-33.2,20c-0.7,0-0.7,0.7-0.7,1.3v43.2c0,0.7-0.7,1.3-1.3,1.3H606
				c-0.7,0-1.3-0.7-1.3-1.3v-29.3c0-0.7,0-0.7-0.7-1.3l-29.2-24.6c-0.7-0.7-0.7-1.3,0-2l0,0c0.7-0.7,1.3-0.7,2,0l25.2,21.9
				c0.7,0.7,2.7,0,2.7-1.3v-47.9c0-0.7,0.7-1.3,1.3-1.3h2.7c0.7,0,1.3,0.7,1.3,1.3v35.3c0,1.3,1.3,2,2,1.3l30.5-18.6
				c0.7-0.7,1.3,0,2,0.7l0,0C644.5,495.7,644.5,496.3,643.8,497z" />
                    <g id="red_14_" class="red">
                        <g id="r-top_14_">
                            <ellipse id="top_130_" class="st8" cx="607.4" cy="473.1" rx="29.9" ry="29.9" />
                            <path id="top_129_" class="st39" d="M607.4,473.1l20.6,20.6l0,0c-6,6-13.9,8.6-21.2,8.6L607.4,473.1z" />
                            <path id="top_128_" class="st39" d="M607.4,473.1l-21.2,20.6l0,0c-5.3-6-8.6-13.3-8-20.6H607.4z" />
                            <path id="top_127_" class="st39" d="M607.4,473.1l21.2-20.6l0,0c5.3,6,6.6,13.3,7.3,20.6H607.4z" />
                            <path id="top_126_" class="st39" d="M607.4,473.1l-20.6-21.3l0,0c6-6,13.3-9.3,20.6-8.6V473.1z" />
                        </g>
                        <g id="r-left_14_">
                            <ellipse id="left_130_" class="st8" cx="573.5" cy="503" rx="15.3" ry="15.3" />
                            <path id="left_129_" class="st39" d="M573.5,503.7l8,13.3l0,0c-4,2.7-8,2.7-11.9,2L573.5,503.7z" />
                            <path id="left_128_" class="st39" d="M573.5,503l-13.3,8l0,0c-2-4-2.7-8-2-11.3L573.5,503z" />
                            <path id="left_127_" class="st39" d="M573.5,503l13.3-8l0,0c2,4,3.3,8,2,11.3L573.5,503z" />
                            <path id="left_126_" class="st39" d="M573.5,503l-8-13.3l0,0c4-2,7.3-3.3,11.3-2L573.5,503z" />
                        </g>
                        <g id="r-right_14_">
                            <ellipse id="right_130_" class="st8" cx="644.5" cy="494.4" rx="14.6" ry="14.6" />
                            <path id="right_129_" class="st39" d="M644.5,494.4l13.3,7.3l0,0c-2,4-5.3,6-9.3,7.3L644.5,494.4z" />
                            <path id="right_128_" class="st39" d="M644.5,494.4l-7.3,13.3l0,0c-3.3-2-6-5.3-6.6-8.6L644.5,494.4z" />
                            <path id="right_127_" class="st39" d="M644.5,494.4l7.3-13.3l0,0c3.3,2,6,4.7,7.3,8.6L644.5,494.4z" />
                            <path id="right_126_" class="st39" d="M644.5,494.4l-13.3-7.3l0,0c2-3.3,4.6-6,8.6-7.3L644.5,494.4z" />
                        </g>
                    </g>
                </g>
                <g id="red-tree_15_">
                    <path id="r-trunk_15_" class="st7" d="M909.8,483.7l-33.2,20c-0.7,0-0.7,0.7-0.7,1.3v43.2c0,0.7-0.7,1.3-1.3,1.3H872
				c-0.7,0-1.3-0.7-1.3-1.3V519c0-0.7,0-0.7-0.7-1.3L840.8,493c-0.7-0.7-0.7-1.3,0-2l0,0c0.7-0.7,1.3-0.7,2,0L868,513
				c0.7,0.7,2.7,0,2.7-1.3v-47.9c0-0.7,0.7-1.3,1.3-1.3h2.7c0.7,0,1.3,0.7,1.3,1.3V499c0,1.3,1.3,2,2,1.3l30.5-18.6
				c0.7-0.7,1.3,0,2,0.7l0,0C910.4,482.4,910.4,483,909.8,483.7z" />
                    <g id="red_15_" class="red">
                        <g id="r-top_15_">
                            <ellipse id="top_135_" class="st8" cx="873.3" cy="459.8" rx="29.9" ry="29.9" />
                            <path id="top_134_" class="st39" d="M873.3,459.8l20.6,20.6l0,0c-6,6-13.9,8.6-21.2,8.6L873.3,459.8z" />
                            <path id="top_133_" class="st39" d="M873.3,459.8L852,480.4l0,0c-5.3-6-8.6-13.3-8-20.6H873.3z" />
                            <path id="top_132_" class="st39" d="M873.3,459.8l21.2-20.6l0,0c5.3,6,6.6,13.3,7.3,20.6H873.3z" />
                            <path id="top_131_" class="st39" d="M873.3,459.8l-20.6-21.3l0,0c6-6,13.3-9.3,20.6-8.6V459.8z" />
                        </g>
                        <g id="r-left_15_">
                            <ellipse id="left_135_" class="st8" cx="839.4" cy="489.7" rx="15.3" ry="15.3" />
                            <path id="left_134_" class="st39" d="M839.4,490.4l8,13.3l0,0c-4,2.7-8,2.7-11.9,2L839.4,490.4z" />
                            <path id="left_133_" class="st39" d="M839.4,489.7l-13.3,8l0,0c-2-4-2.7-8-2-11.3L839.4,489.7z" />
                            <path id="left_132_" class="st39" d="M839.4,489.7l13.3-8l0,0c2,4,3.3,8,2,11.3L839.4,489.7z" />
                            <path id="left_131_" class="st39" d="M839.4,489.7l-8-13.3l0,0c4-2,7.3-3.3,11.3-2L839.4,489.7z" />
                        </g>
                        <g id="r-right_15_">
                            <ellipse id="right_135_" class="st8" cx="910.4" cy="481" rx="14.6" ry="14.6" />
                            <path id="right_134_" class="st39" d="M910.4,481l13.3,7.3l0,0c-2,4-5.3,6-9.3,7.3L910.4,481z" />
                            <path id="right_133_" class="st39" d="M910.4,481l-7.3,13.3l0,0c-3.3-2-6-5.3-6.6-8.6L910.4,481z" />
                            <path id="right_132_" class="st39" d="M910.4,481l7.3-13.3l0,0c3.3,2,6,4.7,7.3,8.6L910.4,481z" />
                            <path id="right_131_" class="st39" d="M910.4,481l-13.3-7.3l0,0c2-3.3,4.6-6,8.6-7.3L910.4,481z" />
                        </g>
                    </g>
                </g>
                <g id="green-tree_13_">
                    <path id="g-trunk_13_" class="st7" d="M388.2,502.1L388.2,502.1c0.9-0.9,1.8-0.9,2.7-0.9l36.4,21.6c0.9,0.9,2.7,0,2.7-1.7v-40.6
				c0-0.9,0.9-1.7,1.8-1.7h3.5c0.9,0,1.8,0.9,1.8,1.7v55.2c0,1.7,1.8,2.6,2.7,0.9l30.2-25c0.9-0.9,1.8-0.9,2.7,0l0,0
				c0.9,0.9,0.9,1.7,0,2.6l-34.6,28.5l-0.9,0.9v33.6c0,0.9-0.9,1.7-1.8,1.7h-3.5c-0.9,0-1.8-0.9-1.8-1.7v-50c0-0.9,0-0.9-0.9-1.7
				l-39.9-23.3C388.2,503.9,388.2,502.1,388.2,502.1z" />
                    <g id="green_13_" class="green">
                        <g id="g-right_13_">
                            <ellipse id="left_140_" class="st8" cx="472.5" cy="513.4" rx="18.6" ry="18.1" />
                            <path id="left_139_" class="st9" d="M476.9,530.6c-4.4,1.7-9.8,0.9-14.2-1.7l0,0l8.9-15.5L476.9,530.6z" />
                            <path id="left_138_" class="st9" d="M490.2,509.1c1.8,4.3,0,8.6-1.8,13.8l0,0l-16-9.5L490.2,509.1z" />
                            <path id="left_137_" class="st9" d="M453.9,517.7c-1.8-4.3,0-8.6,1.8-13.8l0,0l16,9.5L453.9,517.7z" />
                            <path id="left_136_" class="st9" d="M468,496.1c4.4-1.7,8.9,0,13.3,2.6l0,0l-9.8,15.5L468,496.1z" />
                        </g>
                        <g id="g-left_13_">
                            <ellipse id="right_140_" class="st8" cx="388.2" cy="502.1" rx="17.7" ry="17.3" />
                            <path id="right_139_" class="st9" d="M382.9,518.5c-4.4-0.9-8.9-4.3-10.6-8.6l0,0l15.1-8.6L382.9,518.5z" />
                            <path id="right_138_" class="st9" d="M405.1,506.5c-0.9,4.3-4.4,7.8-8,10.4l0,0l-8.9-14.7L405.1,506.5z" />
                            <path id="right_137_" class="st9" d="M370.5,497c0.9-4.3,4.4-7.8,8-10.4l0,0l8.9,14.7L370.5,497z" />
                            <path id="right_136_" class="st9" d="M393.5,484.9c4.4,0.9,8,4.3,10.6,8.6l0,0l-15.1,8.6L393.5,484.9z" />
                        </g>
                        <g id="g-top_13_">
                            <ellipse id="top_140_" class="st8" cx="432.6" cy="478.9" rx="35.5" ry="34.5" />
                            <path id="top_139_" class="st9" d="M432.6,513.4c-8.9,0-18.6-3.5-25.7-10.4l0,0l24.8-24.2L432.6,513.4z" />
                            <path id="top_138_" class="st9" d="M468,478.9c0.9,8.6-3.5,16.4-9.8,24.2l0,0l-25.7-24.2H468z" />
                            <path id="top_137_" class="st9" d="M397.1,478.9c0.9-8.6,2.7-17.3,8.9-24.2l0,0l25.7,24.2H397.1z" />
                            <path id="top_136_" class="st9" d="M431.7,444.3c8.9-0.9,16.9,3.5,24.8,9.5l0,0l-24.8,25V444.3z" />
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </svg>
    <div class='snow'></div>
    <div><img class="santa" src="https://www.consultdolphin.com/wp-content/uploads/2015/12/Santa-Claus-Sleigh-PNG-7-480x148.png" alt="santa" />
    </div>
    <div>
        <p id="merry" class="text-center">Merry Christmas</p>
    </div>
</div>

Lollipop Forest，圣诞节动画：七彩茅屋，棒棒糖森林，雪山和圣诞老人驾乘由9只驯鹿拉的雪橇动画。

html5, 圣诞节

编辑器支持Emmet

快捷键

Lollipop Forest，圣诞节动画：七彩茅屋，棒棒糖森林，雪山和圣诞老人驾乘由9只驯鹿拉的雪橇动画。

html5, 圣诞节

一款HTML5/SVG斜条纹背景的电商商品详情和购买页面模板

HTML5/CSS3/SVG实现的液体掉落（滑落）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：